JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="anim" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="303px" height="303px" viewBox="0 0 303 303" enable-background="new 0 0 303 303" xml:space="preserve">
	 
<path id="border" d="M151.5,18C225.23,18,285,77.77,285,151.5S225.23,285,151.5,285S18,225.23,18,151.5S77.77,18,151.5,18 M151.5,0
	C111.033,0,72.988,15.759,44.373,44.373C15.759,72.987,0,111.033,0,151.5s15.759,78.513,44.373,107.127
	C72.988,287.241,111.033,303,151.5,303s78.512-15.759,107.127-44.373C287.241,230.013,303,191.967,303,151.5
	s-15.759-78.513-44.373-107.127C230.012,15.759,191.967,0,151.5,0L151.5,0z"/>

<g id="numbers">
	<path id="three" d="M140.241,138.117h8.399c16.32,0,26.401-10.32,26.401-24.24s-11.28-24.721-24.961-24.721
		c-10.32,0-20.88,6.721-23.521,20.641h-24.48c1.92-24.24,22.801-45.121,47.041-45.121c30.48,0,50.401,23.761,50.401,48.721
		c0,12.961-4.08,26.161-18.241,35.281c14.4,9.121,20.161,23.521,20.161,37.441c0,31.681-22.801,52.32-51.841,52.32
		c-23.041,0-43.922-15.359-48.481-43.92h24.48c4.56,11.76,11.521,19.439,25.44,19.439c13.681,0,25.921-10.32,25.921-27.12
		c0-17.04-12.001-27.12-26.401-27.12h-10.319V138.117z" visibility="hidden">
		
		<set attributeName="visibility" attributeType="XML" begin="0s" dur="0.9s" to="visible"/>
	</path>
	
	<path id="two" d="M103.481,213.959l66.722-83.521c5.279-6.72,6.239-12,6.239-17.041c0-12-8.88-24.24-23.521-24.24
		c-13.2,0-23.76,9.36-24.96,24.72h-24.48c0.24-27.84,21.84-49.201,47.521-49.201c28.561,0,49.922,21.84,49.922,48.961
		c0,11.28-3.121,21.121-10.32,30l-54.962,68.882h65.282V237h-97.443V213.959z" visibility="hidden">
		
		<set attributeName="visibility" attributeType="XML" begin="1s" dur="0.9s" to="visible"/>
	</path>
		
	<path id="one" d="M142.362,92.037l-24.241,17.76v-25.92l24.241-17.76h24.48V237h-24.48V92.037z"...