Yet another demo. This time it's a radar chart with a custom fill gradient. There is nothing special here, it's just some old-school pixel manipulations on 2D canvas, but the example itself can be used by my students at some point. It'll wait for them here.
The Pen by Ivan Bogachev (@sfi0zy).
Some time has passed since the CSS Painting API was born, but it's still not supported by all major browsers. Meanwhile, we can use the standard canvas to do everything. Actually we were able to do that for many years, but for some reason I didn't post any good examples of that trick. Now it's here.
The Pen by Ivan Bogachev (@sfi0zy).
Yet another WebGL example is here! Three planes + some noise = beautiful waves for background effects.
The Pen by Ivan Bogachev (@sfi0zy).
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 would 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).
Just published a new animated gallery on CodePen. As always, the ingredients are quite simple: two canvases, an 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 a 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 simpler, with only one canvas, but it may work as a base for future experiments.
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).
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).
Yet another example. This script generates website backgrounds with various lines. Simple, but looks cool.
The Pen by Ivan Bogachev (@sfi0zy).
My horizontal scroll gallery is in the list of the 100 most hearted pens on CodePen in 2021!
Actually, this is my first program with 1000 likes from other programmers. This gallery is not that complex, but it's some kind of achievement anyway. It's worth mentioning in my small blog.
I've published a new example on CodePen today. It's a combination of 3D math with vectors, matrices, quaternions, and a simple 2D canvas. In this example, I show how to combine all these things to create a projection of the 3D world on the screen. This example is quite simple and quite hard at the same time. I haven't published anything similar before and I hope it'll help my students with their projects.
The Pen by Ivan Bogachev (@sfi0zy).
Just another WebGL example for my students. I noticed that I don't have a good example of the onBeforeCompile method of the materials in Three.js, but I use it in my work fairly often. So I created it. Nothing really important here, but it looks nice.
The Pen by Ivan Bogachev (@sfi0zy).
Just another WebGL example.
The Pen by Ivan Bogachev (@sfi0zy).
For a long time I wanted to make an experiment. I have an idea to combine Delaunay triangulation, clip-path, and my CSS demos with multiple backgrounds. Finally, I found a time to make it. The performance of this combination is not good, but it was expected. Clip-path property seems to be very heavy in terms of performance optimization. But the animation I got can be used for small pictures. It works well enough. Feel free to add it to your projects.
The Pen by Ivan Bogachev (@sfi0zy).
Some time ago I posted an example of the background image for multiple elements. This time I used the same ideas to create a nice concept of animation for two images. Similar effects usually use WebGL, and I wanted to check if it's possible to recreate them with CSS. I used 25 elements, animating at the same time, but it still has a good performance. I didn't expect this, really. It's a good point to start a new series of CSS experiments.
The Pen by Ivan Bogachev (@sfi0zy).
UPD: This demo has been featured in the "Best of CodePen #2/2021" by FreeFrontend:
I received an interesting question recently. Another developer asked about horizontal scroll and different effects attached to it. He shows me a video concept of some gallery and I thought that it's worth it to create an example of something similar. So I did it. It looks like Locomotive Scroll works strange in the CodePen's iframes. Sometimes it gets stuck. But it's expected. Iframes and custom scroll have always been a bad combination. But the whole demo is pretty nice in my opinion. Feel free to open it on CodePen and use it for your experiments too.
The Pen by Ivan Bogachev (@sfi0zy).
Here is another demo with Bezier curves. I created it for my students as an additional example for my articles on math for UI developers.
The Pen by Ivan Bogachev (@sfi0zy).
Several years ago I created Ucavatar. It's a simple tool. Its only purpose is to create geometric patterns on a canvas for future usage as avatars. But it's boring. I have been thinking for a while about the similar tool, but with funny faces, and now I found time for making it. Check it out on CodePen and feel free to use it in your projects.
The Pen by Ivan Bogachev (@sfi0zy).
In the latest article I explained how to use matrices to make 3D scenes. A couple of days later I thought it would be a good idea to create an additional interactive demo for my students. And there it is. I don't know if this thing has its own name in programming or mathematics, but I call it "techno bird". This variation of it is written in VanillaJS and GLSL and works in all modern browsers. At least it should, I haven't tested it really. But its main purpose is to illustrate the principles from my article, so if it works in Chrome - it's enough.
The Pen by Ivan Bogachev (@sfi0zy).
Most young frontend developers don't know how to use CSS animations. I know, they say that they read docs on MDN or had been practicing with "fadeIn", "fadeOut" animations and so on. But if you give them a really complicated animation, they can't transform it into the code. They don't even understand how to start. Sometimes they say that it's impossible to create one or another animation. I assume it's because they have mental blocks which are saying what they can do with CSS and what they can't. So, I wrote an article to break these mental blocks. I got a number of examples from CodePen (some of them are mine, some are just popular examples from other authors) and explained the things inside them. I showed how to use CSS animations in various "impossible" cases and what methods of their creation should be inspected when you're mastering your skills.
The development of custom borders for the HTML elements always was a nightmare for junior developers. The main thing is that such elements usually must be responsive. Their sizes must depend on the content inside. The old-school solution with an image in the background of the element is not responsive. It works sometimes, but not always. In more complicated cases we have two opinions: use border images or draw everything with CSS gradients. I like the second one. I use it in most cases because usually the borders in my designs are not so complex. I don't see any reason to create a lot of images for them. Anyway, I created a cute example of such borders for one of my answers on Habr Q&A.
The Pen by Ivan Bogachev (@sfi0zy).
Full screen sliders with various background animations based on standard geometries are very popular nowadays. Recently I found a question about them on Habr Q&A and I thought "why not create it?". And I created an example of such animations with anime.js. It's easy, but the effect looks pretty nice and contemporary.
The Pen by Ivan Bogachev (@sfi0zy).
How to obtain the mouse within a shader using Three.js? How to load multiple textures with promises? How to calculate ratios of everything to create full-screen backgrounds with non-distorted parts? How to create amazing transitions between images in WebGL? Check out my new demos on CodePen to find the answers!
The Pen by Ivan Bogachev (@sfi0zy).
The Pen by Ivan Bogachev (@sfi0zy).
The Pen by Ivan Bogachev (@sfi0zy).
This time I shared a pen with an example of usage of a noise generator. This pen includes a sea of particles with random waves on it. The usage of such generators is a very important technique for the creative frontend developers, so, despite the fact that it's only one pen here, I think this part of shaders collection is as important as the other parts.
The Pen by Ivan Bogachev (@sfi0zy).
The show goes on! Three more examples are on CodePen now. These pens are the examples of usage of the shader material with the point cloud. Also, you can find a nice trick in them - I used third dimension to create 2D animations. It's much easier than puzzle out all the math to calculate such animations in two-dimensional space.
The Pen by Ivan Bogachev (@sfi0zy).
The Pen by Ivan Bogachev (@sfi0zy).
The Pen by Ivan Bogachev (@sfi0zy).
I continue posting beautiful shader examples to CodePen. I started with colorful ones and now the time has come for the monochrome ones. They look very futuristic, and I associate them with sci-fi movies.
The Pen by Ivan Bogachev (@sfi0zy).
The Pen by Ivan Bogachev (@sfi0zy).
The Pen by Ivan Bogachev (@sfi0zy).
I played with vertex shaders recently and in addition to my main task I got a number of beautiful effects for the default geometries in Three.js. I don't know where I can use them in production and I made a decision to share them on CodePen.
The Pen by Ivan Bogachev (@sfi0zy).
The Pen by Ivan Bogachev (@sfi0zy).
The Pen by Ivan Bogachev (@sfi0zy).
This time I created an example of the responsive infographics with hexagons. Probably you've already seen the similar design concepts. This one doesn't work in IE/Edge because I used clip-path with polygon to create the hexagonal elements, but if you need to support these browsers, you can simply replace the clip-path solution with SVG images.
The Pen by Ivan Bogachev (@sfi0zy).
A couple of days ago I found an interesting question on Habr Q&A. A man asked how to create a design concept with HTML and CSS. It's a common question for this website and the concept looked simple, but nobody knew how to create it. The thing is the sides of the triangles in the concept must be parallel on all screen sizes, not only on full hd. I accepted the challenge and created a prototype for the modern browsers. It looks like we can't create such a design using CSS only, even for evergreen browsers, so I used some JS to calculate the widths of the triangles based on the heights of the cards. But maybe someone will invent a new CSS trick for this type of calculations.
The Pen by Ivan Bogachev (@sfi0zy).
I answer questions on Habr Q&A, and every week I see questions about interactive maps. A lot of beginners don't understand how to create them. So I wrote a tutorial for them. I used SVG, leader-line and hammer.js to create an interactive plan with some hover effects, arrows, and popups. I hope it'll be helpful.
The Pen by Ivan Bogachev (@sfi0zy).
I see a lot of frontend developers who are tempted to create monstrous solutions, even if they don't need to. I'm not sure if it happens because a lot of people don't know basic CSS or they think it's cool to do everything with WebGL, but it happens too often to be a coincidence. Todays demo is pretty simple, but it can show you how to split an image between multiple divs with pure CSS.
The Pen by Ivan Bogachev (@sfi0zy).
UPD: Ana Tudor created a more complex version of this effect for the images of any aspect ratio. It also has the parameters for the panels. It may be hard to understand its logic, but it's really really cool.
The Pen by Ivan Bogachev (@sfi0zy).
UPD: Check out the speed coding of this example on the FreeFrontend YouTube channel:
Three years ago I switched from C/C++ to front-end development. Up to this day I have shared interesting examples on CodePen. Not every day, of course, but often. Several days ago their number reached 300. Looking back, I can say that it was a good time. Painting with CSS, canvas animations and WebGL shaders, SVG hacks... There are no impossible design ideas for me now. I can create everything. It's only a matter of time. I think it's a good idea to celebrate this anniversary. Feel free to use my pens - all of them are distributed under the MIT license.
I didn't participate in any challenges for programmers for a long time, but yesterday I decided to take part in the current weekly #codepenchallenge. It's called "B and W and A". What is the best thing to do with the letter "A"? Of course, construct snowflakes. So, I did it. This pen reminded me of those times when I created things just for fun. Anyway, this animation is nice. Check it out on CodePen!
The Pen by Ivan Bogachev (@sfi0zy).
Texture projection is one of the most powerful tricks in WebGL. It can be used in different situations. I don't know why I still haven't published any pens with it. But today I corrected this mistake. Here are two demos - the first one is for the ordinary texture projection and the second one for the "sticky" projection.
The Pen by Ivan Bogachev (@sfi0zy).
The Pen by Ivan Bogachev (@sfi0zy).
Yesterday I found a question on Habr Q&A about the menu from the old version of the URSA Major Supercluster website. Their original menu uses canvas and I wanted to create something similar, but without it. This demo is for the desktops only, but I think it’s easy to create some fallbacks for the small screens and touch screens.
The Pen by Ivan Bogachev (@sfi0zy).
A few days ago I played with different LESS mixins. It was boring a little, and I've added some keyframes to my demo and got this nice animation. I made a couple of stupid mistakes in the code. I know. Its performance can be improved. Ana Tudor fixed them and created an alternative version of the animation. It doesn't work in IE/Edge, but it's very interesting.
The Pen by Ivan Bogachev (@sfi0zy).
I'd like to present my new article about the shader materials and effect composer. In some ways it's like an additional part to the article about the 3D presentations in Three.js.
The Pen by Ivan Bogachev (@sfi0zy).
We continue to examine fragment shaders. The Voronoi diagram, pixelation and masks are on the agenda today.
The Pen by Ivan Bogachev (@sfi0zy).
My new article is a WebGL tutorial for front-end developers. It consists of 12 examples of simple, but pretty shaders and a lot of tips for beginners.
Here is a couple of examples:
The Pen by Ivan Bogachev (@sfi0zy).
The Pen by Ivan Bogachev (@sfi0zy).
New article! This time I explained five powerful CSS tricks, including the inverted transformations, linear gradients in borders and SVG+HTML sandwich.
The Pen by Ivan Bogachev (@sfi0zy).
I'm still experimenting with shaders and I've created a couple of nice loaders. Do you think that WebGL shaders were created for something else? Maybe you're right. But it's easy to create interesting effects with them. So...
The Pen by Ivan Bogachev (@sfi0zy).
Ok. This is an experiment and I think we shouldn't do it in production. The performance is quite bad. It's better to use SVG here.
The Pen by Ivan Bogachev (@sfi0zy).
After a break, I've returned to the CodePen with a new effect based on Three.js. I don't know where I can use it in this form, but it looks interesting.
The Pen by Ivan Bogachev (@sfi0zy).
Yet another animation.
The Pen by Ivan Bogachev (@sfi0zy).
I published a new article about the dotted lines. This is the fourth article about the animations and wow-effects. Enjoy it!
Just another SVG animation.
The Pen by Ivan Bogachev (@sfi0zy).
Today I finished an article about the paths in SVG. It's the next article in my series of articles about wow effects in front-end development.
The Pen by Ivan Bogachev (@sfi0zy).
Finally, after all these pens on CodePen, I wrote an article about SVG masks. This is the continuation of the previous article about the effects based on particles. Today I explained the basic principles of usage of 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 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).
SVG masks. That's a very interesting technology. It allows us to create a lot of cool effects, even in IE. Here is an 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 particles are difficult to implement. It's not true. Every developer with basic skills in JS can create this kinds 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 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 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 the effects they were never intended for". He is absolutely right, but...
The Pen by Ivan Bogachev (@sfi0zy).
Nick Babich writes very interesting articles on UX Planet and usually they include amazing animations. But it seems like they are created using Adobe After Effects. I got the idea of this funny face from one of his articles and tried to recreate it using CSS and JS. Let's see what I got:
The Pen by Ivan Bogachev (@sfi0zy).
Here are three of my CSS loaders, which I didn't share on my website previously. The first one uses the standard gooey SVG filter on the seven moving dots, the second is the simple cube with animated backgrounds and the last animation consists of the circles changing 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).
I've created a nice animation of an arrow. 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).
This is a nice 404 page with some CSS animations. And again, I created it for 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).
This is an 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 SVG. Let's hope we'll be able to use this kinds of things in production one day.
The Pen by Ivan Bogachev (@sfi0zy).
Here is another amazing spinner. It works correctly in Google Chrome only because SVG filters have different behaviors in modern browsers, but this is still a nice example.
The Pen by Ivan Bogachev (@sfi0zy).
This is a simple spinner with some interesting effects. It can be used as a full-page loading indicator.
The Pen by Ivan Bogachev (@sfi0zy).
I'm still experimenting with SVG filters and I got the "share button" with nice animations and a gooey effect.
The Pen by Ivan Bogachev (@sfi0zy).
I wrote a new article. It's about creation of images in CSS. This is a little story about the CSS Quests and the Daily CSS Images challenges.
Previously I thought that creation of gooey elements was a kind of magic... After creating a gooey menu myself I can say that it's much easier to do than it may look like.
The Pen by Ivan Bogachev (@sfi0zy).
I was inspired by a little demo created by Sergey Valiukh for the Tubik Studio and I've created this pen. This is a sunny menu for a restaurant with some nice animations in pure CSS.
The Pen by Ivan Bogachev (@sfi0zy).
This is an example of usage of the jQuery-Snowfall plugin. I wrote this pen for one of my answers on Habr Q&A, but it looks so pretty, I can't not to share it here.
The Pen by Ivan Bogachev (@sfi0zy).
This is a simple generator of avatars. I created it for one of my answers on Habr Q&A.
The Pen by Ivan Bogachev (@sfi0zy).
Yet another CSS example is here! Originally, I wrote this fire for the quest on CSSQuests, but now it's available on CodePen too. This is a pure CSS animation, without any JavaScript or SVG.
The Pen by Ivan Bogachev (@sfi0zy).
Here is my self portrait with some animations in pure CSS. Without any images, without any SVG elements.
The Pen by Ivan Bogachev (@sfi0zy).
Have you even seen the reflection of the website? I have no idea where it can be used, but the concept itself is quite interesting.
The Pen by Ivan Bogachev (@sfi0zy).
This is my CSS/JS concept of the old book with the "turn the page" animation that can be integrated into the website.
The Pen by Ivan Bogachev (@sfi0zy).
