Convert SVG/CSS to SVG/SMIL - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts

August 19, 2015 at 7:33 am #206741

FezVrasta

Participant

I have this spinner:

http://codepen.io/FezVrasta/pen/pJXovM

I’d like to convert it to SMIL… I have never used it so this is my first attempt and logically it doesn’t work:

<svg class="material-spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
  <animateTransform attributeName="transform" type="rotate" values="0;270" begin="0s" dur="1.4s" fill="freeze" repeatCount="indefinite"/>
  <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30">
    <animateTransform attributeName="transform" type="stroke-dashoffset" values="187;46.75;187" begin="0s" dur="1.4s" fill="freeze" repeatCount="indefinite"/>
    <animateTransform attributeName="transform" type="stroke" values="#4285F4;#DE3E35;#F7C223;#1B9A59;#4285F4" begin="0s" dur="5.6s" fill="freeze" repeatCount="indefinite"/>
    <animateTransform attributeName="transform" type="rotate" values="0;135;450" begin="0s" dur="1.4s" fill="freeze" repeatCount="indefinite"/>
  </circle>
</svg>

What am I doing wrong?

Thanks!

August 20, 2015 at 1:54 pm #206803