Articles

A nice icon system technique that takes a couple of Sass functions to parse SVGs and convert them into CSS custom properties.

Learn to export a WebGL generative piece to an SVG by using the three.js library.

Learn how to code creative animations using SVG paths and the getPointAtLength() function.

This article shows how to render 3D by only using the native 2D Canvas API in JavaScript.

Learn how to use the MeshSurfaceSampler in Three.js to create interesting effects.

I've been posting short videos to breakdown some of my generative animation on social media over the years.
You can find them all reunited on this page 🌈

Clipping and masking have been around for a while now in CSS and even have pretty decent browser support. I recently worked on a project that needed to use a clipping technique for tooltips showing above links in text.

Learn how to setup a Figma plugin to generate random stars.

Animating accordions in JavaScript has been one of the most asked animations on websites. Let's see how we can make it happen using the native details element and the Web Animations API!

Exploring the possibilities of Instagram filters, and what they could mean for brands today.

Maybe you have heard about random walkers but you don't know how to use them in generative art.
Today we will see how you can control walkers to make them less random and produce more interesting results like this.

When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can.

If you’ve ever had to display an interactive animation during a live talk or a class, then you may know that it’s not always easy to interact with your slides and while talking.

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them.

Early on when working on the website for Antwerp’s fashion museum MoMu, we decided to follow a more systematic approach to design. It made a lot of sense for the project, as it had to be a scalable system much more than a custom designed set of pages.
So by making design more systematic, it should prove easier to code.

In this article you will learn how to let your user drag & drop within your SVG. Don't skip the bonus part as it show lots of unknown SVG features such as converting mouse coordinates to viewbox coordinates!

Scrollbars on Windows are taking extra space in the viewport but vw units don't take that space into account.

A collection of decorative shapes displayed as backgrounds using WebGL. Shapes are created with Three.js and animated with the GreenSock library.

Some WebGL experiments where the viewer seemingly travels through a textured tunnel. Powered by Three.js and inspired by the effect seen on fornasetti.com.

If there’s one thing I truly love, it’s tunnel animations 😍
I will try in this post to explain the basic setup for one of this demo.

Have you ever dreamed of creating a sphere made out of particle with nothing but CSS and a bit of math?

You know I love SVG. But what I love more are animated SVG! In this article I'll explain how you can use the viewBox attribute as a camera for your illustrations.

I love particles, I really do. For some effects I need to convert one bitmap image into lots of tiny particles. Here is how!