Ivan Bogachev

Finally, after all these pens on CodePen, I wrote an article about the SVG masks. This is the continuation of the previous article about the effects based on the particles. Today I explained the basic principles of usage of the masks and showed some cool examples.

Just another loader. Nothing unusual. Some heavy filters. Not the best performance. Looks nice.

The Pen by Ivan Bogachev (@sfi0zy).

Image carousel is one of the most popular components nowadays. It’s being used by millions of websites. But usually we see pretty simple effects in them. SVG gives us the ability to greatly improve our carousels in the visual terms. And again, I’ve used SVG masks for that.

The Pen by Ivan Bogachev (@sfi0zy).

Today is St. Valentine’s day. So I’ve painted a heart. One mask, two paths and a couple of lines of javascript to start the action.

The Pen by Ivan Bogachev (@sfi0zy).

The winter is ending, but I’d like to present the Christmas waltz that I wrote a couple of days ago. This is a short, festive waltz for a chamber orchestra. I composed it for the piano and it was a common etude for beginners, but later, when I tried to use some synthesized strings and a glockenspiel, it was transformed into the beautiful composition.

SVG masks. This is a very interesting technology. It allows us to create a lot of cool effects, even in IE. Here is a example:

The Pen by Ivan Bogachev (@sfi0zy).

A lot of people (and I mean not regular people, but professional front-end developers) think that the animations based on the particles are difficult to implement. It’s not true. Every developer with basic skills in JS can create this kind of effects very easily. I wrote an article about these animations to help them to start.

Yet another animation.

The Pen by Ivan Bogachev (@sfi0zy).

A lot of interesting infinite patterns in CSS animations can be obtained from the one idea. Today`s pen is an example of it. This animation consists of two steps with simple CSS transforms. There are no rare properties or magic behavior here.

The Pen by Ivan Bogachev (@sfi0zy).

The idea is very simple: take a number of small elements, put them into the one big element and rotate it. After that we can move the small elements in any direction and it will look like we have the infinite number of the elements. But it’s not the truth. The number of the elements is finite.

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…

The Pen by Ivan Bogachev (@sfi0zy).