Pixel Art Cloud Shader Demo

Procedural pixel-art clouds built from clusters of circles instead of noise. They have clean, cartoon-style cumulus silhouettes, a flat bottom, banded shading with ordered dithering, a 1-pixel outline and a gentle “breathing” animation. Each cloud’s shape is set per instance, so many clouds can share one material.

How it works
Each cloud is a row of overlapping circles whose radii follow a hump, so the middle puffs are tallest. A row of smaller circles fills the base, and the shape is cut flat at the bottom. The circles are combined as signed distance fields, which also gives a clean 1-pixel outline. Shading comes from the distance to each circle’s center shifted toward the light. It’s banded into the palette colors, and a 4×4 Bayer matrix dithers the band edges. The dither pattern is anchored to the rect, so it moves with the cloud instead of crawling across it. To animate, each puff’s radius wobbles slightly with its own phase and speed, stepped at a low frame rate to avoid edge flicker.

Article: https://observablehq.com/@tripodsan/pixel-art-clouds

Godot Shader: https://godotshaders.com/shader/pixel-art-cartoon-clouds-circle-clusters