Ivan Bogachev

Creative frontend developer



Waves

Waves

Yet another WebGL example is here! Three planes + some noise = beautiful waves for the background effects.

The Pen by Ivan Bogachev (@sfi0zy).

Night Drive

Night Drive

Ok. It’s time to refresh my CodePen profile a bit. In the last years I published mostly educational examples for my students, but it feels like they can’t really work as an example of my own skills. A lot of people can do the same tricks nowadays. They looked cool five years ago, but not anymore. I needed something that will look impressive enough, so I created a new demo, “Night Drive”. It’ll show what I can do with Three.js in one day.

The Pen by Ivan Bogachev (@sfi0zy).

Street Monochrome

Street Monochrome

It’s been a while, isn’t it? I haven’t posted anything for a few months now. I’m working on a new photography-related project. It’s a lot of work. Meanwhile, I decided to share the darktable styles that I use for the street photography. Why not? My main style is the Street Monochrome. This is a high contrast black and white style, it works well in almost every situation that I encounter on the street, and now it’s available as a .dtstyle file and as a LUT.

Animated CSS backgrounds

Animated CSS backgrounds

I continue my experiments with Medium, and I got a few animated backgrounds. Check them out!

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

Medium

Medium

For a long time, I was thinking about a tool that will provide a set of CSS custom properties with the mouse position, scroll position, random values etc. And since I didn’t find anything that I would like, I decided to write the tool myself. I called it “Medium” because it connects CSS and JS worlds. The library itself is quite simple, but I used it for a few demos on CodePen and it really speeds things up. Now it’s available on GitHub and as NPM package.

100000 lines

100000 lines

Just published a new animated gallery on CodePen. As always, the ingredients are quite simple: two canvases, old trusty line-drawing algorithm and some junior-level image data calculations. But the result looks interesting:

The Pen by Ivan Bogachev (@sfi0zy).

It’s not for mobile devices, obviously. This amount of draw calls is kind of too much for them. It works fine on my smartphone, but I think it’ll be a bad practice to run such thing for mobile devices in production.

And here is another demo:

The Pen by Ivan Bogachev (@sfi0zy).

It was the first step in the development of that gallery. It’s more simple, with only one canvas, but it may work as a base for future experiments.

Animated tag cloud

Animated tag cloud

Fibonacci sphere + rotation matrix + some CSS magic = tags cloud. You don’t need tons of scripts to create things like that.

The Pen by Ivan Bogachev (@sfi0zy).

Maze

Maze

Yet another Three.js example! This time it’s a simple maze with one light and shadows. It’s easy to do, and it looks not bad at all.

The Pen by Ivan Bogachev (@sfi0zy).

Isolation

Isolation

My first photo book has been printed. It’s a story about lockdown, about social isolation, loneliness and emptiness.

Introduction to SVG Animation

Introduction to SVG Animation

I’ve returned. Kind of. Maybe. Just published a new article on programming - an introduction to SVG animation. It’s been a while since I wrote my last article. I compressed my experience from a few years into one lecture. It’s a little more abstract than my last articles on math, more about tools, approaches, misconceptions, standards and reality of modern web development, but I believe it’ll be helpful for my students. They have lots of questions about SVG and this article supposed to cover most of them.