https://eloquentjavascript.net/15_event.html#i_NOgRH0Y9st

Eloquent JavaScript 1502 Mouse trail.html

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

<script>
  const dots = [];
  let index = 0;
  for (let i = 0; i < 10; i++) {
    const dot = document.createElement("div");
    dot.className = 'trail';
    dot.style.display = 'none';
  	document.body.appendChild(dot);
    dots.push(dot);
  }
  window.addEventListener("mousemove", (event) => {
    const dot = dots[index];
    dot.style.display = 'initial';
    dot.style.left = (event.pageX - 3) + 'px';
    dot.style.top = (event.pageY - 3) + 'px';
    index = (index + 1) % dots.length;
  });
</script>