JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 1024 1024">
    <g>
    <circle cx="600" cy="600" r="200" stroke-dasharray="0.01, 34.94" stroke="hsl(120, 100%, 50%)"/>
    <circle class="c2" cx="600" cy="600" r="200" stroke-dasharray="0.01, 34.94" stroke="hsl(120, 100%, 50%)"/>
    </g>
    <g>
    <circle cx="600" cy="600" r="240" stroke-dasharray="0.01, 41.92" stroke="hsl(108, 100%, 50%)"/>
    </g>
    <g>
    <circle cx="600" cy="600" r="280" stroke-dasharray="0.01, 48.859" stroke="hsl(96, 100%, 50%)"/>
    </g>
    <g>
    <circle cx="600" cy="600" r="320" stroke-dasharray="0.01, 27.92" stroke="hsl(84, 100%, 50%)"/>
    </g>
    <g>
    <circle cx="600" cy="600" r="360" stroke-dasharray="0.01, 31.45" stroke="hsl(72, 100%, 50%)"/>
    </g>
    <g>
    <circle cx="600" cy="600" r="400" stroke-dasharray="0.01, 34.95" stroke="hsl(60, 100%, 50%)"/>
    </g>
    <g>
    <circle cx="600" cy="600" r="440" stroke-dasharray="0.01, 38.42" stroke="hsl(48, 100%, 50%)"/>
    </g>
    <g>
    <circle cx="600" cy="600" r="480" stroke-dasharray="0.01, 41.94" stroke="hsl(36, 100%, 50%)"/>
    </g>
    <g>
    <circle cx="600" cy="600" r="520" stroke-dasharray="0.01, 45.44" stroke="hsl(24, 100%, 50%)"/>
    </g>
    <g>
    <circle cx="600" cy="600" r="560" stroke-dasharray="0.01, 48.92" stroke="hsl(12, 100%, 50%)"/>
    </g>
    <g>
    <circle class="c2" cx="600" cy="600" r="240" stroke-dasharray="0.01, 41.92" stroke="hsl(108, 100%, 50%)"/>
    </g>
    <g>
    <circle class="c2" cx="600" cy="600" r="280" stroke-dasharray="0.01, 48.859" stroke="hsl(96, 100%, 50%)"/>
    </g>
    <g>
    <circle class="c2" cx="600" cy="600" r="320" stroke-dasharray="0.01, 27.92" stroke="hsl(84, 100%, 50%)"/>
    </g>
    <g>
    <circle class="c2" cx="600" cy="600" r="360" stroke-dasharray="0.01, 31.45" stroke="hsl(72, 100%, 50%)"/>
    </g>
    <g>
    <circle class="c2" cx="600" cy="600" r="400" stroke-dasharray="0.01, 34.95" stroke="hsl(60, 100%, 50%)"/>
    </g>
    <g>
    <circle class="c2" cx="600" cy="600" r="440"...

CSS

body {
    background: black;
    padding: 0;
    margin: 0;
    height: 2000px;
    width: 3000px;
}

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

circle { 
    -webkit-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center;
    -webkit-animation-duratioon: 3s; 
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite; }

circle:nth-child(10n+2)  { -webkit-animation-name:second; 
                       -moz-animation:second  3s ease-in-out infinite; 
                       animation:second  3s ease-in-out infinite;}
circle:nth-child(10n+3)  { -webkit-animation-name:third; -moz-animation:third   3s ease-in-out infinite; animation:third   3s ease-in-out infinite; }
circle:nth-child(10n+4)  { -webkit-animation-name:fourth; -moz-animation:fourth  3s ease-in-out infinite; animation:fourth  3s ease-in-out infinite; }
circle:nth-child(10n+5)  { -webkit-animation-name:fifth; -moz-animation:fifth   3s ease-in-out infinite; animation:fifth   3s ease-in-out infinite; }
circle:nth-child(10n+6)  { -webkit-animation-name:sixth; -moz-animation:sixth   3s ease-in-out infinite; animation:sixth   3s ease-in-out infinite; }
circle:nth-child(10n+7)  { -webkit-animation-name:seventh; -moz-animation:seventh 3s ease-in-out infinite; animation:seventh 3s ease-in-out infinite; }
circle:nth-child(10n+8)  { -webkit-animation-name:eighth; -moz-animation:eighth  3s ease-in-out infinite; animation:eighth  3s ease-in-out infinite; }
circle:nth-child(10n+9)  { -webkit-animation-name:ninth; -moz-animation:ninth   3s ease-in-out infinite; animation:ninth   3s ease-in-out infinite; }
circle:nth-child(10n+10) { 
    -webkit-animation-name:tenth; 
    -moz-animation:tenth   3s ease-in-out infinite; 
    animation:tenth   3s ease-in-out infinite; 
    -webkit-transform: rotate(10deg);}
    
.c2 {
    stroke-width: 10;
    stroke: black;
    -webkit-transform:...