JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<svg id="svg" viewBox="-10 -10 173 61">
<defs>
  <path id="path" d="M153,20.89c0-45.88-74.95,0-74.95,0S.5,66.76.5,20.89s77.54,0,77.54,0S153,66.76,153,20.89Z" fill="none" vector-effect="non-scaling-stroke" />
</defs>
<text  x="38" class="small">click anywhere to stop/start</text>
<g>
  <g class="cont"> <use href="#path"/> </g>
  <g class="s1 anim"> <use href="#path"/> </g>
  <g class="s2 anim"> <use href="#path"/> </g>
  <g class="s3 anim"> <use href="#path"/> </g>
  <g class="s4 anim"> <use href="#path"/> </g>
</g>

<g transform="translate(0,20)">
    <g class="cont"> <use href="#path"/> </g>
  <g class="s1 anim"> <use href="#path"/> </g>
  <g class="s2 anim"> <use href="#path"/> </g>
  <g class="s3 anim"> <use href="#path"/> </g>
  <g class="s4 anim"> <use href="#path"/> </g>
</g>

<g transform="translate(0,40)">
    <g class="cont"> <use href="#path"/> </g>
  <g class="s1 anim"> <use href="#path"/> </g>
  <g class="s2 anim"> <use href="#path"/> </g>
  <g class="s3 anim"> <use href="#path"/> </g>
  <g class="s4 anim"> <use href="#path"/> </g>
</g>


</svg>

CSS

body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
svg {
  overflow: visible;
  width: 100%;
}

text.small { font: italic 6px sans-serif;}

.cont {   stroke-width:14;   stroke:#fa0;}

.s1{   stroke-width:4px;   stroke:#fff;   stroke-dasharray:0,10,13,0;}
.s2{   stroke-width:6px;   stroke:#fff;   stroke-dasharray:0,11,2,10;}
.s3{   stroke-width:4px;   stroke:#fff;   stroke-dasharray:0,10,2,11;}
.s4{   stroke-width:2px; stroke-linecap:butt;  stroke:#fff;   stroke-dasharray:0,9,4,10; }

.anim{animation: dash 12s linear infinite;
      animation-play-state: running;}

@keyframes dash {
  to {
    stroke-dashoffset: 420;
  }
}

JavaScript

var anim = true;
function clickBody() {
	  anim = !anim;
    const state = anim ?  'running' : 'paused';
    Array.from(document.getElementsByClassName("anim"))
    	.forEach( elem => elem.style.animationPlayState = state)
}
document.body.addEventListener("click", clickBody)