DEV Community

Dominic Myers
Dominic Myers

Posted on • Originally published at drmsite.blogspot.com on

Spinner 33

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 265 265">
  <g transform="rotate(28.3063 132.5 132.5)">
    <circle cx="132.5" 
            cy="172.5" 
            r="22.5">
    </circle>
    <path fill="none" 
          stroke="#000" 
          stroke-width="5" 
          d="M98.318 7.105l4.403 168.758c1.81 15.065 14.583 26.407 29.756 26.422 15.173.014 27.968-11.302 29.808-26.363l4.4-168.695">
    </path>
    <path fill="none" 
          stroke="#000" 
          stroke-width="5" 
          d="M87.024 10.793l5.77 166.191c2.413 20.088 19.444 35.212 39.675 35.232 20.232.02 37.294-15.069 39.746-35.152l5.766-166.18">
    </path>
    <path fill="none" 
          stroke="#000" 
          stroke-width="5" 
          d="M75.828 15.615l7.04 162.492c3.013 25.11 24.303 44.016 49.594 44.041 25.29.025 46.617-18.839 49.68-43.943l7.037-162.52">
    </path>
    <path fill="none" 
          stroke="#000" 
          stroke-width="5" 
          d="M64.765 21.672l8.174 157.557c3.613 30.136 29.163 52.828 59.515 52.858 30.352.03 55.946-22.612 59.618-52.741l8.172-157.61">
    </path>
    <path fill="none" 
          stroke="#000" 
          stroke-width="5" 
          d="M53.877 29.105l9.137 151.245c4.218 35.155 34.024 61.625 69.432 61.66 35.408.035 65.266-26.376 69.554-61.524l9.135-151.302">
    </path>
    <path fill="none" 
          stroke="#000" 
          stroke-width="5" 
          d="M43.21 38.12l9.878 143.35c4.824 40.176 38.887 70.423 79.35 70.463 40.464.04 74.586-30.14 79.49-70.306l9.874-143.383">
    </path>
    <path fill="none" 
          stroke="#000" 
          stroke-width="5" 
          d="M32.829 49.07L43.16 182.592c5.423 45.201 43.745 79.235 89.27 79.28 45.526.044 83.916-33.914 89.427-79.104l11.356-132.352">
    </path>
    <circle cx="132.5" 
            cy="132.5" 
            r="130" 
            fill="none" 
            stroke="#000" 
            stroke-width="5">
    </circle>
    <animateTransform attributeName="transform" 
                      begin="0s" 
                      dur="3.33s" 
                      type="rotate" 
                      from="0 132.5 132.5" 
                      to="360 132.5 132.5" 
                      repeatCount="indefinite">
    </animateTransform>
  </g>
</svg>

I saw this the day before yesterday so finished the above last night:

It's not quite right, but it's getting there - I'll revisit, once I've got some more time. It's also supposed to be rotating but I've tried and failed, to figure out how to add animated SVGs here.

Top comments (0)