JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

CSS

svg{
  height:300px;
}

JavaScript

console.clear();

var loop = "M31,201.1C16.6,118.8,69.1,40.5,150.7,26c32.5-5.8,64.5-1.6,93.7,14.5c59.1,32.6,88.4,94,77.1,159.1";
var pin = "M176.329,176.455c-1.8,0-3.5-0.9-4.4-2.6c-1.3-2.4-0.5-5.5,2-6.8l131.8-72.9c2.4-1.3,5.5-0.5,6.799,2	c1.301,2.4,0.5,5.5-2,6.8l-131.799,72.9C178.029,176.255,177.129,176.455,176.329,176.455z";
var circle_svg = "M167.007,162.261c-5.1,5.1-5.1,13.4,0,18.5s13.4,5.1,18.5,0 s5.1-13.4,0-18.5C180.308,157.161,172.107,157.161,167.007,162.261z";

var loopLength = Snap.path.getTotalLength(loop);

console.log(loopLength);

var s = Snap();

circle = s.path({
 path: loop,
 fill: "gray",
 stroke: "#c00",
 strokeWidth: 0,
 strokeLinecap: "round"
});

var g = s.gradient("l(0, 0, 1, 1)#80DFFE-#0CA5EE-#07A3EE");

circleOutline =  s.path({
 path: Snap.path.getSubpath(loop, 0, 0),
 stroke: g,
 fillOpacity: 0,
 strokeWidth: 0,
 strokeLinecap: "round"
});



circle_middle = s.path({
path:circle_svg,
stroke: "#000000",
fill:"#ffffff",
 strokeWidth: 5,


});

pin_line = s.path({
path:pin,
fill: "#000000"

});


//circle_middle.attr({ transform: "t"+[0,0] });
//pin_line.attr({ transform: "t"+[12,14] });
pin_line.attr({ transform: 'r-170 176 172' });
circle.click(function(e){

  Snap.animate(0, loopLength,
    function(step){ //step function

      circleOutline.attr({
        path: Snap.path.getSubpath(loop, 0, step),
        strokeWidth: 25
      });

    }, // end of step function
    800 //duration

  );//Snap.animate
  
	pin_line.animate({ transform: 'r30 176 172' }, 1000 );

  
});//click the circle