JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
	<rect width="50" height="50"/><rect x="8" y="8" width="34" height="34" transform="rotate(18.088 25 25)">
	<animate id="r" attributeName="fill" dur="1s" begin="0s;m.end" from="red" to="#FF0"/>
	<animate id="y" attributeName="fill" dur="1s" begin="r.end" from="#FF0" to="#0F0"/>
	<animate id="g" attributeName="fill" dur="1s" begin="y.end" from="#0F0" to="#0FF"/>
	<animate id="c" attributeName="fill" dur="1s" begin="g.end" from="#0FF" to="#00F"/>
	<animate id="b" attributeName="fill" dur="1s" begin="c.end" from="#00F" to="#F0F"/>
	<animate id="m" attributeName="fill" dur="1s" begin="b.end" from="#F0F" to="red"/>
	<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="90 25 25" dur="2s" repeatCount="indefinite"/>
	</rect>
	<circle cx="25" cy="25" r="10"/>
</svg>