Alex Harri: A Flowing WebGL Gradient, Deconstructed:

This effect is written in a WebGL shader using noise functions and some clever math.

In this post, I’ll break it down step by step. You need no prior knowledge of WebGL or shaders — we’ll start by building a mental model for writing shaders and then recreate the effect from scratch.

This was an absolutely wonderful read on constructing a nice looking animated WebGL shader, from the very basics up to the end product.

New to me in this post was the concept of stacking sine waves — what a clever idea.

You might remember Harri’s post “The Engineering behind Figma’s Vector Networks” from back in 2019.