Dynamic Sun

Better GIF: https://goo.gl/iqGBp7
Code: https://bit.ly/2VGqwAn
================================

Hello Dribbble! 👋🏻

I finally decided to break the ice with this animation.

It's made out of SVG circles, with some JS to give it life, you can see and tweak the live version here: https://bit.ly/2VGqwAn

Color palette inspired by CodePen's monthly challenge!

Making Process:

It started by deciding to play around with stroke-dashoffset, stroke-dasharray, and stroke-width properties.

I animated those to achieve a rotating and shrinking effect, mixing different easings and measures for each piece to have it look more dynamic.

Then I introduced some scaling by animating the radius of each circle, still using different factors for each one.

At this point it kinda looked like a sci-fi dashboard element, but that I didn't like, no no ☝️.

A scaling circle in the middle made it pop a lil' more and reminded me of a sun, with a bit of elastic easing it felt like it was shooting out light, which is what the fading background mimics.

That's all folks, see ya next time! 🏃🏻‍♂️