JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<svg id = "mySVG" width="200" height="200" viewBox="0 0 200 200">
    <circle id = "myCirclePath" cx="100" cy="100" r="90" stroke="#ccc" stroke-width="2" fill="none"/>
    <circle id = "myAniCircle" cx="100" cy="10" r="8" stroke="#f00" stroke-width="1" fill="#fff"/> 
  </svg>

JavaScript

var animateAtCircle = function (elementToAnimate, circlePath, duration, callback){
      //I would see:
      var imagesPerSecond = 60;
      //and calculate the sum of steps i need:
      var sumSteps = duration / (1000/imagesPerSecond);
      //an circle has 360 degrees
      //so my stepwidth is:
      var stepWidth = 360 / sumSteps
      //let us begin with step 1
      var step = 1;
      //before, i need a Variable to store my Timeout
      var pathAnim;
      //and begin with our animation function
      var anim=function(){
        //rotate the circle relative
        //to the midpoint of circlePath
        elementToAnimate.setAttribute("transform",`rotate(
          ${step*stepWidth},
          ${circlePath.getAttribute('cx')},
          ${circlePath.getAttribute('cy')}
          )`);
        //until step smaller then sumSteps
        if ( step < sumSteps){
          //set step to next step
          step ++
          //and wait for creating next rotation an call anim again...
          pathAnim = setTimeout(anim, 1000/imagesPerSecond);
        } else {
          //animation is finished;
          clearTimeout(pathAnim);
          //call callback function
          if (callback) return callback();
        }
      }
      //now call our anim loop function
      anim();
    }
    //now call our Aimation at circle...
    animateAtCircle(myAniCircle,myCirclePath,5000, function(){console.log('finished');});