Ivan Bogachev

Creative frontend developer



Funny face

Funny face

Nick Babich writes very interesting articles on UX Planet and usually they include amazing animations. But it seems like they are created using the Adobe After Effects. I got the idea of this funny face from the one of his article and tried to re-create it using CSS and JS. Let’s see what I got:

The Pen by Ivan Bogachev (@sfi0zy).

Collection of loaders

Collection of loaders

Here are the three of my CSS loaders, which I don’t share on my website previously. The first one uses the standard gooey SVG filter on seven moving dots, the second is the simple cube with animated backgrounds and the last animation consists of circles which change their sizes like waves. Nothing serious, but they can look very attractive.

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

Flamenco guitar method

Flamenco guitar method

My flamenco guitar method is available for sale now. It’s a book for the beginner guitarists which consists of descriptions of the most popular flamenco forms, rhythms and a lot of examples.

UPD: The free PDF version is available now. Feel free to download it.

Arrow animation

Arrow animation

I’ve created a nice animation of the arrow consisting of a number of dots. And again, I got the design idea from the question on Habr Q&A and made it work in the CSS world.

The Pen by Ivan Bogachev (@sfi0zy).

Animated 404 page

Animated 404 page

This is a nice 404 page with some CSS animations. And again, I created it for the one of my answers on Habr Q&A. I was inspired by some GIF animations from dribbble, but unfortunately I don’t remember the name of the designer.

The Pen by Ivan Bogachev (@sfi0zy).

UI in VR

UI in VR

I wrote an article about the one of my VR experiments. I created a website that can be viewed using a Google Cardboard or similar devices. The experiment works in the desktop browsers only due to the bad support of the device orientation detection in the mobile browsers for today, but it can be a starting point for the future experiments.

Liquid spinner

Liquid spinner

This is the amazing liquid spinner. Unfortunately, it doesn’t work in IE and Edge browsers because they don’t support SVG filters yet. This is a very interesting experiment that shows the real power of the SVG on the web. Let’s hope we’ll be able to use this kind of things in production at some time.

The Pen by Ivan Bogachev (@sfi0zy).

Gooey spinner

Gooey spinner

Here is another amazing spinner. It works correctly in Google Chrome only because the SVG filters have different behaviors in the modern browsers, but this is still a nice example.

The Pen by Ivan Bogachev (@sfi0zy).

Thinking about REM

Thinking about REM

I wrote a new article about thinking, about obvious things and the labor productivity in a small web-design studio.

3 dots spinner

3 dots spinner

This is a simple spinner with some interesting effects. It can be used as full-page loading indicator.

The Pen by Ivan Bogachev (@sfi0zy).