<div class="circle"></div>
.circle {
	position: absolute;
  border: solid 4px #333;
	width: 65px; 
	height: 65px; 
  border-radius: 50%; 
  transition: .15s;
}

.circle:active {
  border: solid 4px #e76f51;
}
var Y = 0, X = 0;
var moveY = 0, moveX = 0;
   
$(document).mousemove(function(event){
    Y = event.pageY - 33; 
    X = event.pageX - 33;
  });
    
setInterval(function(){
    moveY += ((Y - moveY)/15);
    moveX += ((X - moveX)/15);
    $(".circle").css({ top: moveY +'px', left: moveX +'px'});
  }, 0);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js