Recreating the Pinterest Spinny Button

spinny_button.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" 
  height="240" 
  width="240" 
  viewBox="0 0 24 24">
  <g>
    <path 
      fill="#b5b5b5" 
      d="
        M 15.00, 10.50 
        C 14.17, 10.50 13.50,  9.83 13.50,  9.00 
        C 13.50,  8.17 14.17,  7.50 15.00,  7.50 
        C 15.83,  7.50 16.50,  8.17 16.50,  9.00 
        C 16.50,  9.83 15.83, 10.50 15.00, 10.50 
        M 15.00, 16.50 
        C 14.17, 16.50 13.50, 15.83 13.50, 15.00 
        C 13.50, 14.17 14.17, 13.50 15.00, 13.50 
        C 15.83, 13.50 16.50, 14.17 16.50, 15.00 
        C 16.50, 15.83 15.83, 16.50 15.00, 16.50 
        M  9.00, 10.50 
        C  8.17, 10.50  7.50,  9.83  7.50,  9.00 
        C  7.50,  8.17  8.17,  7.50  9.00,  7.50 
        C  9.83,  7.50 10.50,  8.17 10.50,  9.00 
        C 10.50,  9.83  9.83, 10.50  9.00, 10.50 
        M  9.00, 16.50 
        C  8.17, 16.50  7.50, 15.83  7.50, 15.00 
        C  7.50, 14.17  8.17, 13.50  9.00, 13.50 
        C  9.83, 13.50 10.50, 14.17 10.50, 15.00 
        C 10.50, 15.83  9.83, 16.50  9.00, 16.50 
        M 12.00,  0.00
        C  5.37,  0.00  0.00,  5.37  0.00, 12.00 
        C  0.00, 18.63  5.37, 24.00 12.00, 24.00 
        C 18.63, 24.00 24.00, 18.63 24.00, 12.00 
        C 24.00,  5.37 18.63,  0.00 12.00,  0.00
      ">  
    </path>
    <animateTransform
      attributeType="XML"
      attributeName="transform"
      type="rotate"
      from="0 12 12"
      to="360 12 12"
      dur="1.2s"
      begin="0.3s"
      repeatCount="indefinite" 
    />
  </g>
</svg>

In the history you'll find a misstep where I tried to do this with circle primitives. Sadly, the small interior circles are supposed to be transparent, so we need that big complicated path.