JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <div id="follower"></div>
</div>
<div class="container2">
        <div id="follower2"></div>
</div>

CSS

#follower{
  position : relative;
  background-color : yellow;
  width:30px;
  height:30px;
  border-radius:50px;
}


.container
{
    width:150px;
    height:150px;   
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    border:1px solid #000000;
    border-radius:500px;
}

#follower2{
  position : relative;
  background-color : red;
  width:50px;
  height:50px;
  border-radius:50px;
}

.container2
{
    width:150px;
    height:150px;   
    position:absolute;
    top:200px;
    left:200px;
    overflow:hidden;
    border:1px solid #000000;
    border-radius:500px;
}

JavaScript

// first circle variables
var center = {
    x: $(".container").width()/2 - 15, 
    y: $(".container").height()/2 - 15
};
var distanceThreshold = $(".container").width()/2 - 15;
var mouseX = 0, mouseY = 0;

// second circle variables
var center2 = {
    x2: $(".container2").width()/2 - 25, 
    y2: $(".container2").height()/2 - 25
};
var distanceThreshold2 = $(".container2").width()/2 - 25;
var mouseX2 = 0, mouseY2 = 0;


$(window).mousemove(function(e){ 
   var d = {
        x: e.pageX - center.x,
        y: e.pageY - center.y
   };
   var distance = Math.sqrt(d.x*d.x + d.y*d.y);
   if (distance < distanceThreshold) {
     mouseX = e.pageX;
     mouseY = e.pageY;
   } else {
     mouseX = d.x / distance * distanceThreshold + center.x;
     mouseY = d.y / distance * distanceThreshold + center.y;
   }
    
   var d2 = {
        x2: e.pageX - 200 - center2.x2,
        y2: e.pageY - 200 - center2.y2
   };
   var distance2 = Math.sqrt(d2.x2*d2.x2 + d2.y2*d2.y2);
   if (distance2 < distanceThreshold2) {
     mouseX2 = e.pageX - 200;
     mouseY2 = e.pageY - 200;
   } else {
     mouseX2 = d2.x2 / distance2 * distanceThreshold2 + center2.x2;
     mouseY2 = d2.y2 / distance2 * distanceThreshold2 + center2.y2;
   }
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 2;
    yp += (mouseY - yp) / 2;
    follower.css({left:xp, top:yp});
    
}, 30);

// cache the selector
var follower2 = $("#follower2");
var xp2 = 0, yp2 = 0;
var loop2 = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp2 += (mouseX2 - xp2) / 2;
    yp2 += (mouseY2 - yp2) / 2;
    follower2.css({left:xp2, top:yp2});
    
}, 30);