I saw this animation on Dribbble and I fell in love with it, so of course I had to remake it in CSS. I still need to do the spark animation when the eclipse is total (well, it’s not total, it’s an annular solar eclipse actually). When I was doing it, I couldn’t figure out an elegant way to have the spark come around and paint the border the way it does in the animation, at least not with CSS. I’m still working on my animation chops here, okay? If I had realized how vital animation would be to my future career, I would have taken more animation classes when I did sound. Yeah, that degree’s totally working out for me these days…

Enjoy!

See the Pen Annular solar eclipse in CSS by Smokie Lee (@xtoq) on CodePen.