JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 60 60">
    <g class="g">
    <circle cx="30" cy="30" r="10" stroke-dasharray="0.001, 1.745" stroke="hsl(120, 100%, 50%)"/>
    <g class="g">
    <circle cx="30" cy="30" r="12" stroke-dasharray="0.001, 2.094" stroke="hsl(108, 100%, 50%)" class="c2"/>
    <g class="g">
    <circle cx="30" cy="30" r="14" stroke-dasharray="0.001, 2.443" stroke="hsl(96, 100%, 50%)"/>
    <g class="g">
    <circle cx="30" cy="30" r="16" stroke-dasharray="0.001, 2.793" stroke="hsl(84, 100%, 50%)"  class="c2"/>
    <g class="g">
    <circle cx="30" cy="30" r="18" stroke-dasharray="0.001, 3.142" stroke="hsl(72, 100%, 50%)"/>
    <g class="g">
    <circle cx="30" cy="30" r="20" stroke-dasharray="0.001, 3.491" stroke="hsl(60, 100%, 50%)" class="c2"/>
    <g class="g">
    <circle cx="30" cy="30" r="22" stroke-dasharray="0.001, 3.840" stroke="hsl(48, 100%, 50%)"/>
    <g class="g">
     <circle cx="30" cy="30" r="24" stroke-dasharray="0.001, 4.189" stroke="hsl(36, 100%, 50%)"  class="c2"/>
    <g class="g">
    <circle cx="30" cy="30" r="26" stroke-dasharray="0.001, 4.538" stroke="hsl(24, 100%, 50%)"/>
    <g class="g">
    <circle cx="30" cy="30" r="28" stroke-dasharray="0.001, 4.887" stroke="hsl(12, 100%, 50%)"  class="c2"/>
    </g></g></g></g></g></g></g></g></g></g>
</svg>

CSS

body {
    background: black;
    padding: 0;
    margin: 0;
}

circle {
    fill: none;             
    stroke-width: 1;
    stroke-linecap: round;
}

.g { 
    -webkit-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center;
    -webkit-animation-duration: 108s; 
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-name: anim; 
    -moz-animation:second  3s ease-in-out infinite; 
     animation:second  3s ease-in-out infinite;}
    
.c2 {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(5deg); 
} 
 
@-webkit-keyframes anim {   0% { -webkit-transform:rotate(0deg)}
                            2.778% { -webkit-transform:rotate(10deg)}
                            5.56% { -webkit-transform:rotate(20deg)}
                            8.33% { -webkit-transform:rotate(30deg)}
                           11.11% { -webkit-transform:rotate(40deg)}
                           13.89% { -webkit-transform:rotate(50deg)}
                           16.67% { -webkit-transform:rotate(60deg)}
                           19.44% { -webkit-transform:rotate(70deg)}
                           22.22% { -webkit-transform:rotate(80deg)}
                           25% { -webkit-transform:rotate(90deg)}
                           27.78% { -webkit-transform:rotate(100deg)}
                           30.56% { -webkit-transform:rotate(110deg)}
                           33.33% { -webkit-transform:rotate(120deg)}
                           36.11% { -webkit-transform:rotate(130deg)}
                           38.89% { -webkit-transform:rotate(140deg)}
                           41.67% { -webkit-transform:rotate(150deg)}
                           44.44% { -webkit-transform:rotate(160deg)}
                           47.22% { -webkit-transform:rotate(170deg)}
                           50%    { -webkit-transform:rotate(180deg)}
                          ...