// dots is an array of Dot objects, // mouse is an object used to track the X and Y position // of the mouse, set with a mousemove event listener below var dots = [], mouse = { x: 0, y: 0 }; // The Dot object used to scaffold the dots var Dot = function() { this.x = 0; this.y = 0; this.node = (function(){ var n = document.createElement("div"); n.className = "trail"; document.body.appendChild(n); return n; }()); }; // The Dot.prototype.draw() method sets the position of // the object's <div> node Dot.prototype.draw = function() { this.node.style.left = this.x + "px"; this.node.style.top = this.y + "px"; }; // Creates the Dot objects, populates the dots array for (var i = 0; i < 50; i++) { var d = new Dot(); dots.push(d); } // This is the screen redraw function function draw() { // Make sure the mouse position is set everytime // draw() is called. var x = mouse.x, y = mouse.y; x = x + 125; // to make dots little bit far from cursor // This loop is where all the 90s magic happens dots.forEach(function(dot, index, dots) { var nextDot = dots[index + 1] || dots[0]; dot.x = x; dot.y = y; dot.draw(); x += (nextDot.x - dot.x) * .6; y += (nextDot.y - dot.y) * .6; }); } (function (mouseStopDelay) { var timeout; document.addEventListener('mousemove', function (e) { clearTimeout(timeout); timeout = setTimeout(function () { var event = new CustomEvent("mousestop", { detail: { clientX: e.clientX, clientY: e.clientY }, bubbles: true, cancelable: true }); e.target.dispatchEvent(event); }, mouseStopDelay); }); }(1700)); addEventListener("mousemove", function(event) { //event.preventDefault(); mouse.x = event.pageX; mouse.y = event.pageY; }); addEventListener("mousestop", function(event) { // You can hide or get the dots far from the cursor when mouse is stop mouving mouse.x = 0; mouse.y = 0; }); // animate() calls draw() then recursively calls itself // everytime the screen repaints via requestAnimationFrame(). function animate() { draw(); requestAnimationFrame(animate); } // And get it started by calling animate(). animate();

 * { background: black; } .trail { /* className for the trail elements */ position: absolute; height: 10px; width: 10px; border-radius: 50%; background: red; box-shadow: 1px 1px 4px 1px lightblue; }