ruch obiektu po krzywej - js, onmousemove

Question

Witam, chciałabym uzyskać płynny ruch obiektu w momencie, kiedy porusza się on po krzywej. Kod działa w porządku, kiedy kółko porusza się  po linii prostej, jednak gdy zmieniam kąt prostej koło zaczyna przeskakiwać i jego ruch przestaje być płynny. Czy ktoś ma może jakiś pomysł? Dziękuje za odpowiedzi.

<div id = "circle-overlay">
<span id = "circle"></span>
</div>

    #circle-overlay{
        width: 500px;
        position: relative;
        height: 2px;
        margin: 100px auto; 
        background: black;
        transform: rotate(-10deg);
}

 #circle{
        width:50px;
        height: 50px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: -25px;
        left: -25px;
        border: 2px solid white;
        z-index: 10;   
    }

let line = document.getElementById('circle-overlay'),
circle = document.getElementById('circle'),

w = circle.offsetWidth/2;
h = circle.offsetHeight/2;
    
circle.addEventListener('mousedown', function(){
 
circle.addEventListener("mousemove", moveCircle);
line.addEventListener("mousemove", moveCircle);
      
function moveCircle(e){
let x,y,a;
e.preventDefault();
e = e || window.event;  
 
//wyznaczenie odległości od viewport 
a = line.getBoundingClientRect();
x = e.pageX - a.left; 
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;

//ograniczenie ruchu kółka
if(x>a.width)x = a.width;//prawa krawędż   
if(x < 0)x = 0; //lewa krawędż
if(y>a.height) y = a.height; //dolna krawędż
if(y < 0)y = 0; //górna krawędż

    
circle.style.left = (x-w) + "px";
circle.style.top = (y-h) + "px";

    
this.addEventListener("mouseup", function(){
 this.removeEventListener('mousemove', moveCircle)
});
    
this.addEventListener("mouseout", function(){
 this.removeEventListener('mousemove', moveCircle)
  
});
       
}
  
})