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.

Pet projects

placeholder Earthquakes map preview
1 

WebGL globe with points for all earthquakes with magnitude more than 5 which happened last year.

placeholder Zen launcher preview
1 

Apps launcher for Google Chrome. Open sources. No ads. No trackers. No analytics.

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.