JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg id="pathContainer">
    <path  fill="none" id="path" d="M10,100 Q100,20 200,100 T400,100"></path>
    <circle id="movingCircle" r="10"></circle>
  </svg>

CSS

svg {
	position: fixed;
      width: 100%;
      height: 100%;
    }

JavaScript

window.addEventListener('DOMContentLoaded', function() {
  var path = document.getElementById('path');
  var pathLength = path.getTotalLength();
  var circle = document.getElementById('movingCircle');
  var svg = document.getElementById('pathContainer');

  svg.addEventListener('mousemove', function(event) {
    var x = event.clientX;
    var percent = x / window.innerWidth;
    var point = path.getPointAtLength(pathLength * percent);

    circle.setAttribute('cx', point.x);
    circle.setAttribute('cy', point.y);
  });
});