Articles

I sometimes write here, sometimes elsewhere. Find all my writings below 📜📕📰🖋️.

Filters

  • Kinetic typography animation

    I love animation, and I love it even more when it involves typography! I saw a lovely motion video for a logo that I wanted to reproduce only using SVG and GreenSock. Follow this tutorial to see how you can do it yourself.

    Read me
  • How I Made an Icon System Out of CSS Custom Properties

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

    Read me on CSS-Tricks
  • Render 3D scenes from WebGL to SVG

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

    Read me on Generative Hut
  • Animate Anything Along an SVG Path

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

    Read me on Codrops
  • A 3D sphere made out of hundreds of black dots How to render 3D in 2D canvas

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

    Read me
  • Surface Sampling in Three.js

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

    Read me on Codrops
  • How to - Tutorials

    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 🌈

    Read me
  • Perfect Tooltips With CSS Clipping and Masking

    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.

    Read me on CSS-Tricks
  • Figma plugins and Generative Art

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

    Read me
  • How to Animate the Details Element Using WAAPI

    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!

    Read me on CSS Tricks
  • Digital Lab #1: Instagram filters

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


    Read me
  • Abstract pattern made out of hundres of black lines drawn on a paper Random walkers

    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.

    Read me on Generative Hut
  • Click on me written in a button. There are particles floating all around the button Playing With Particles Using the Web Animations API

    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.

    Read me on CSS-Tricks
  • Hundres of mouse cursors Simulating Mouse Movement

    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.

    Read me on CSS-Tricks
  • Two screenshot of websites on a mobile phone. The first one is not fitting the mobile height perfectly The trick to viewport units on mobile

    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.

    Read me on CSS-Tricks
  • Screenshot of Momu website with blue rectangles highlighting the spacings Spacings and CSS Custom properties

    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.

    Read me
  • Illustration of a bird in a black square Creating a Panning Effect for SVG

    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!

    Read me on CSS-Tricks
  • HTML Modal with lorem text and a block button misplaced on top right Scrollbars & CSS Custom Properties

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

    Read me
  • 3D blob shape with Quantum written in front Decorative WebGL Backgrounds

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

    Read me on Codrops
  • A 3D tube with a texture of purple galaxies Infinite Tubes with Three.js

    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.

    Read me on Codrops
  • A 3D tunnel made out of hundres of rainbow color particles Tunnel animation (Part 1)

    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.

    Read me
  • A 3D sphere made of hundres of particles Create your own sphere in CSS

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

    Read me
  • Animating the viewBox

    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.

    Read me
  • How to convert an image into particles

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

    Read me