cursor custom 커서 커스텀

<div id="wrapper">
	<div id="cursor"></div>
</div>

#wrapper{
    overflow-x: hidden;
    position: relative;
}

/* cursor */
#cursor{
    position: absolute;
    z-index: 10000;
    pointer-events: none;
}
#cursor:after{
    display: block;
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f00;
    filter: drop-shadow(0 0 2px rgba(255,0,0,0.7)) drop-shadow(0 0 5px rgba(255,0,0,0.7)) drop-shadow(0 0 15px rgba(255,0,0,0.7)); 
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
#cursor.on:after{
    -webkit-transform: scale(2);
    transform: scale(2);
}

function cursor(){
    const cursor = document.getElementById('cursor');
    let mouseX = 0;
    let mouseY = 0;
    let cursorX = 0;
    let cursorY = 0;
    let speed = 0.1;

    function animate() {
    let distX = mouseX - cursorX;
    let distY = mouseY - cursorY;
    
    cursorX = cursorX + (distX * speed);
    cursorY = cursorY + (distY * speed);
    
    cursor.style.left = cursorX + 'px';
    cursor.style.top = cursorY + 'px';
    
    requestAnimationFrame(animate);
    }
    animate();

    document.body.addEventListener('mousemove', function(e){
    mouseX = e.pageX - 10;
    mouseY = e.pageY - 10;
    })
}

function cursorPoint(){
    var hoverBtn = $('.js_btn_hover_ani');
    hoverBtn.on('mouseover', function(){
        $('#cursor').addClass('on')
    });
    hoverBtn.on('mouseleave', function(){
        $('#cursor').removeClass('on')
    });
}