JSFiddle - React, Tailwind, and code Playground

by yangweilim

CSS

.trail { /* className for the trail elements */
    position: absolute;
    height: 6px; width: 6px;
    border-radius: 3px;
    background: teal;
  }
  body {
    height: 300px;
  }

JavaScript

var dots = [];
  for(var i = 0; i<12; i++){
  	trail = document.createElement("div");
    trail.className = "trail";
    document.body.appendChild(trail);
    dots.push(trail);
  }
  
  var position = {x:"", y:""};
  addEventListener("mousemove", function(e){
  	position.x = e.pageX;
    position.y = e.pageY;
    return position; 
  });

  var current = 0;
  function move(pos){
    pos = position;
  	dots[current].style.left = (pos.x - 3) + "px";
    dots[current].style.top = (pos.y - 3) + "px";
    current = (current + 1) % dots.length;
    requestAnimationFrame(move);
  };
  
 requestAnimationFrame(move);