JSFiddle - React, Tailwind, and code Playground

by unhw

HTML

<script src="http://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="240px" height="240px" viewBox="0 0 240 240" enable-background="new 0 0 240 240" xml:space="preserve">

	<g id="circle_container" transform="rotate(-90 120 120)" >
		<circle id="circle" fill="none" cx="120" cy="120" r="110" stroke="#00BF6F" stroke-width="20" stroke-dasharray="692"  />
	</g>
</svg>

JavaScript

var svg = Snap('#svg');

var circle = svg.select('#circle');

circle.animate({'stroke-dashoffset': '-710'}, 600);


circle.attr({fill: "gray"});