JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<svg id="star" width="1.52cm" height="1.52cm" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
 <g>
  <circle cx="76" cy="76" r="72" fill="#000000"/>
  <circle cx="76" cy="76" r="53" fill="#ccc"/>
  <circle cx="76" cy="76" r="22" fill="#800000"/>
  <circle cx="39.665" cy="82.763" r="6.2127" fill="#800000"/>
 </g>
</svg>


<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 <g>
  <circle cx="50" cy="50" r="48" fill="#000000"/>
  <circle cx="50" cy="50" r="35" fill="#ccc"/>
  <circle cx="50" cy="50" r="20" fill="#800000"/>
  <circle cx="39.665" cy="82.763" r="6.2127" fill="#800000"/>
 </g>
</svg>

CSS

@keyframes spin {
0% { transform: rotate(0deg); }
100% {  transform: rotate(-359deg); }
}
#star, #star2 {animation: spin 2s linear infinite;}