const el = document.body.appendChild(

  document.createElement('div'));

el.innerHTML = `

  <svg width="100%" height="100%" viewBox="0 0 550 496">

    <path 

      d="M 20 10 C 100 100 300 00 300 100 200 200 150 300 20 10" 

      stroke="black" fill='none' vector-effect="non-scaling-stroke"/>

    <circle cx="20" cy="10" r="6" fill="red" />

  </svg>

  <style>

    svg, div, body, html {

      overflow: visible; 

      height: 100%; 

      width: 100%;

      margin: 0; padding: 0;

    }

  </style>

 `;

const circle = el.querySelector('circle');

const path = el.querySelector('path');

const length = path.getTotalLength();

let pos = 0;

function loop() {

  pos += 3;

  if (pos > length) {

    pos = 0;

  }

  const point = path.getPointAtLength(pos);

  circle.cx.baseVal.value = point.x;

  circle.cy.baseVal.value = point.y;

  requestAnimationFrame(loop);

}

loop();