JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 600 600">
    <circle cx="300" cy="300" r="100" stroke-dasharray="0.01, 17.44" stroke="hsl(120, 100%, 50%)"/>
    <circle cx="300" cy="300" r="120" stroke-dasharray="0.01, 20.93" stroke="hsl(108, 100%, 50%)"/>
    <circle cx="300" cy="300" r="140" stroke-dasharray="0.01, 24.42" stroke="hsl(96, 100%, 50%)"/>
    <circle cx="300" cy="300" r="160" stroke-dasharray="0.01, 27.92" stroke="hsl(84, 100%, 50%)"/>
    <circle cx="300" cy="300" r="180" stroke-dasharray="0.01, 31.45" stroke="hsl(72, 100%, 50%)"/>
    <circle cx="300" cy="300" r="200" stroke-dasharray="0.01, 34.95" stroke="hsl(60, 100%, 50%)"/>
    <circle cx="300" cy="300" r="220" stroke-dasharray="0.01, 38.42" stroke="hsl(48, 100%, 50%)"/>
    <circle cx="300" cy="300" r="240" stroke-dasharray="0.01, 41.94" stroke="hsl(36, 100%, 50%)"/>
    <circle cx="300" cy="300" r="260" stroke-dasharray="0.01, 45.44" stroke="hsl(24, 100%, 50%)"/>
    <circle cx="300" cy="300" r="280" stroke-dasharray="0.01, 48.92" stroke="hsl(12, 100%, 50%)"/>
    <line x1="300" y1="300" x2="600" y2="300" stroke="white"/>
</svg>

CSS

body {
    background: black;
    padding: 0;
    margin: 0;
}
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-duration: 3s; 
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;}
circle:nth-child(2)  { -webkit-animation-name:second; 
                       -moz-animation:second  3s ease-in-out infinite; 
                       animation:second  3s ease-in-out infinite;}
circle:nth-child(3)  { -webkit-animation-name:third; -moz-animation:third   3s ease-in-out infinite; animation:third   3s ease-in-out infinite; }
circle:nth-child(4)  { -webkit-animation-name:fourth; -moz-animation:fourth  3s ease-in-out infinite; animation:fourth  3s ease-in-out infinite; }
circle:nth-child(5)  { -webkit-animation-name:fifth; -moz-animation:fifth   3s ease-in-out infinite; animation:fifth   3s ease-in-out infinite; }
circle:nth-child(6)  { -webkit-animation-name:sixth; -moz-animation:sixth   3s ease-in-out infinite; animation:sixth   3s ease-in-out infinite; }
circle:nth-child(7)  { -webkit-animation-name:seventh; -moz-animation:seventh 3s ease-in-out infinite; animation:seventh 3s ease-in-out infinite; }
circle:nth-child(8)  { -webkit-animation-name:eighth; -moz-animation:eighth  3s ease-in-out infinite; animation:eighth  3s ease-in-out infinite; }
circle:nth-child(9)  { -webkit-animation-name:ninth; -moz-animation:ninth   3s ease-in-out infinite; animation:ninth   3s ease-in-out infinite; }
circle:nth-child(10) { 
    -webkit-animation-name:tenth; 
    -moz-animation:tenth   3s ease-in-out infinite; 
    animation:tenth   3s ease-in-out infinite; 
    -webkit-transform: rotate(10deg);}
@-webkit-keyframes second {   0% { -webkit-transform:rotate(5deg)  }
                            100% { -webkit-transform:rotate(15deg) } }
@-webkit-keyframes third {  100% {...