JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<svg width="529px" height="328px" viewBox="0 0 529 328" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>

        <g id="clockwiseCircle">
          <animateTransform id="rotateClockwise" attributeName="transform" type="rotate" from="0 327 327" to="360 327 327" dur="50s" repeatCount="indefinite" />
          <use xlink:href="#Circle" />
        </g>

        <g id="antiClockwiseCircle">
          <animateTransform id="rotateClockwise" attributeName="transform" type="rotate" from="360 327 327" to="0 327 327" dur="50s" repeatCount="indefinite" />
          <use xlink:href="#Circle" />
        </g>

        <g id="animatedLine">
          <animateTransform attributeName="transform" type="translate" from="0 -1030" to="0 328" dur="15s" repeatCount="indefinite" />
          <use xlink:href="#DotLine" />
        </g>

        <g id="animatedLine2">
          <animateTransform attributeName="transform" type="translate" from="0 -328" to="0 1000" dur="15s" repeatCount="indefinite" />
          <use xlink:href="#DotLine" />
        </g>

        <g id="DotLine">
            <circle id="Oval-3" fill="#00386C" cx="2.5" cy="102.5" r="2.5"></circle>
            <circle id="Oval-3" fill="#43AE7A" cx="2.5" cy="92.5" r="2.5"></circle>
            <circle id="Oval-3" fill="#43AE7A" cx="2.5" cy="82.5" r="2.5"></circle>
            <circle id="Oval-3" fill="#FCC79B" cx="2.5" cy="72.5" r="2.5"></circle>
            <circle id="Oval-3" fill="#00386C" cx="2.5" cy="62.5" r="2.5"></circle>
            <circle id="Oval-3" fill="#E365A6" cx="2.5" cy="52.5" r="2.5"></circle>
            <circle id="Oval-3" fill="#43AE7A" cx="2.5" cy="42.5" r="2.5"></circle>
            <circle id="Oval-3" fill="#00386C" cx="2.5" cy="32.5" r="2.5"></circle>
            <circle id="Oval-3" fill="#B9E5FA" cx="2.5" cy="22.5" r="2.5"></circle>
            <circle id="Oval-3" fill="#43AE7A" cx="2.5" cy="12.5" r="2.5"></circle>
            <circle id="Oval-3"...