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>
Enter fullscreen mode Exit fullscreen mode

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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more