Published on
placeholder Magic sphere preview

SVG paths have an option called stroke-dashoffset and We can animate it. When Chris Coyier posted an article about it, someone said “as always, using properties for effects they were never intended for”. He is absolutely right, but…

See the Pen Magic sphere by Ivan Bogachev (@sfi0zy) on CodePen.

This propery allows us to add various interesting effects to our websites. For example I created an animation based on the random path, a number of gradients and CSS keyframes. I called it “magic sphere”, but it also looks like a Christmas tree joy.

Related posts


placeholder Muilessium preview
13  2  10k+

Simple UI framework. RSCSS, REM-based sizes, fluid typography and other nice ideas. This website is powered by it.

placeholder Ucavatar preview
13  500+

Unique avatars for your users. No dependencies, VanillaJS, 1.6KB gzipped.

placeholder Atlantic-dark scheme preview
4  2 

Dark color scheme for Vim. Mostly blue and green colors.