JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://semantic-graphics.herokuapp.com/static/js/snap.svg-min.js"></script>
<svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="410" height="410" viewBox="0 0 711.1 717.1" enable-background="new 0 0 711.1 717.1" xml:space="preserve">
  
    <path class="stroke-yellow path-normal" d="M390,205 a1,1 0 1,0 -370,0" fill="none" stroke="blue" stroke-width="36"/>
    <path class="stroke-yellow path-transparent" d="M20,205 a1,1 0 0,0 370,0" fill="none" stroke="black" stroke-width="36"/>
    
    
      
    
</svg>

CSS

.circle{
    stroke-dasharray:2000 ;
    stroke-dashoffset:2000;
}
.circle1{
    stroke-dasharray:2000 ;
    stroke-dashoffset:2000;
}
.circle2{
    stroke-dasharray:2000 ;
    stroke-dashoffset:2000;
}
.circle3{
    stroke-dasharray:2000 ;
    stroke-dashoffset:2000;
}

JavaScript

var s = Snap("#circle");

var innerCircle = s.circle(150, 150, 80).attr({
    fill: "none",
    stroke: 'red',
    strokeWidth: 30,
    //strokeDasharray: "10 300 40 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10",
    //strokeDashoffset: 50
});

Snap.animate(0,400, function( value ){
       innerCircle.attr({ 'strokeDashoffset': value })

},5000 );