Published on
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

Pet projects

Muilessium preview

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

Promo Core preview

Boilerplate for static promotional websites. Pug, LESS, PostCSS, ES6+, Gulp, Webpack, BrowserSync, ESLint, Stylelint, auto-generated docs...

Shaders Gallery preview

Library for creating galleries of photos with effects based on WebGL shaders.