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).
For a long time, I was thinking about a tool that would 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 an NPM package.
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).
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 is supposed to cover most of them.
Yet another example. This script generates website backgrounds with various lines. Simple, but looks cool.
The Pen by Ivan Bogachev (@sfi0zy).
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).
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).
The second lecture on mathematics for front-end developers has been published. I explained how to make 3D scenes with our own hands, without Three.js or other heavy tools, and how to create filters for images. Hope it'll be helpful.
I published the first lecture in the series of lectures on mathematics for UI developers. This subject is not the most important thing for our job, and a lot of programmers didn't learn it even in school, but if you create custom projects with WebGL or animations, you need it. I don't know when I'll publish the rest of the articles in this series. It requires a lot of time to convert them into the text format, but I hope I'll complete the set this year.
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).
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).
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).
Performance is important, but I see a lot of websites with slow and laggy animations. It's awful. I wrote an article about this problem. I hope my advices and practical examples will help you make your animations better.
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).
My new article is an introduction to WebGL presentations. We'll create a nice christmas tree with some pop-up elements and mouse controls using Three.js.
New article! This time we'll create some nice SVG placeholders using the Voronoi diagram and triangulation.
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).
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).
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).
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).
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).
