3 comments

  • Yoshua WuytsYoshua Wuyts, almost 9 years ago (edited almost 9 years ago )

    Clever use of transitions, nice work. For those that didn't read the code, here's a breakdown of how it was done:

    • Create an svg circle with a dashed stroke.
    • Set the stroke-dashoffset to be 360 / 2 + 7 (where 7 appears to be random).
    • Set an infinite transition that spins the circle around.
    • Set an infinite transition that on 4 breakpoints: a: Increments the stroke-dashoffset by n. b: Changes the color.

    The tricky part is understanding how the stroke-dashoffset property works. Try changing the $offset value to 180, 90, 45 and 0 respectively to visualize the changes. More information on stroke-dashoffset here -- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

    4 points
  • Alan Y, almost 9 years ago

    Awesome! It's not rendering properly on Firefox though.

    1 point
  • Luis Marroquin, almost 7 years ago

    Nice

    0 points