JSFiddle - React, Tailwind, and code Playground

by Pasit R

HTML

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100px" height="100px" viewBox="0 0 100 100">

  <g id="spinner">
    <g id="bit6">
      <g id="bit3">
        <line id="bit" x1="50" y1="25" x2="50" y2="10" stroke-linecap="round" stroke-width="8" stroke="#EF8C08" fill="none"/>
        <use xlink:href="#bit" opacity="0.8" transform="rotate(-30 50 50)"/>
        <use xlink:href="#bit" opacity="0.64" transform="rotate(-60 50 50)"/>
      </g>
      <use xlink:href="#bit3" opacity="0.512" transform="rotate(-90 50 50)"/>
    </g>
    <use xlink:href="#bit6" opacity="0.262" transform="rotate(-180 50 50)"/>
  </g>
  <script type="text/ecmascript">
    <![CDATA[

    var rot = 0;

    function spinStep() {
      rot += 30;
      var spinner = document.getElementById("spinner");
      spinner.setAttribute('transform','rotate(' + rot + ',50,50)');
    }
    setInterval(spinStep, 200);

    // ]]>
  </script>

</svg>