JSFiddle - React, Tailwind, and code Playground

by Ian B

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="700" height="800" xmlns="http://www.w3.org/2000/svg">
    <g>
        <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="360 277.5 277.5"
                    to="0 277.5 277.5"
                    dur="4s"
        repeatCount="indefinite"/>
		<path id="path1" fill="green" stroke="green" d="M319.01,44.125
			c-54.002-9.676-109.217,19.349-130.596,72.225c-24.521,60.65,4.763,129.711,65.419,154.232c8.633,3.489,17.415,5.855,26.236,7.233
			c0.115,0.018,0.227,0.039,0.338,0.06c6.935,1.42,13.851,3.489,20.648,6.236c60.659,24.521,89.952,93.533,65.429,154.182
			c-21.376,52.874-76.604,81.949-130.602,72.274c128.82,22.958,251.863-62.846,274.816-191.652
			c22.892-128.429-62.369-251.12-190.569-274.59C319.754,44.258,319.382,44.193,319.01,44.125L319.01,44.125z"/>
		

		<path id="path2" fill="red"  stroke="red" stroke-width="1.999" d="M235.945,510.579
			c53.999,9.678,109.215-19.349,130.599-72.226c24.52-60.647-4.764-129.71-65.419-154.23c-8.638-3.492-17.421-5.858-26.238-7.233
			c-0.113-0.018-0.227-0.038-0.341-0.06c-6.936-1.42-13.847-3.486-20.649-6.236c-60.654-24.522-89.948-93.535-65.427-154.183
			c21.381-52.876,76.605-81.95,130.606-72.272C190.251,21.178,67.21,106.984,44.257,235.787
			c-22.889,128.431,62.372,251.122,190.571,274.591C235.201,510.445,235.574,510.512,235.945,510.579L235.945,510.579z"/>
    </g>

</svg>