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 Snow from 2007 - post preview
placeholder Scroll example - post preview

Pet projects

placeholder Muilessium preview
16  2  10k+

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