Flowing Gradients

This is a blog about creating animated gradients with wave functions and WebGL

My sources

I have read this article about the issue and now I will make my own version. I am actually doing some research for a SvelteKit project and I need some content to fill in on the page while I check out SvelteKit.

Flowing WebGL gradients screenshot

Copy & paste from the article

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.

We’ll cover a lot in this post: writing shaders, interpolation, color mapping, gradient noise, and more. I’ll help you develop an intuition for these concepts using dozens of visual (and interactive!) explanations.
If you just want to see the final code, I’ll include a link to the shader code at the end of the post (this blog is open source so you can just take a look).

Let’s get started!

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.