Shaders · 4 / 6

Dashboard
Creative coding · Shaders

Signed distances & soft edges

For a circle: distance from pixel to center minus radius. Negative inside, positive outside. smoothstep turns that scalar into anti-aliased ink. Add exp(-d * k) for glow. Same idea scales to font outlines, metaballs, and UI masks.

float d = length(uv - center) - radius;
float edge = 1.0 - smoothstep(-0.02, 0.02, d);
Pro tip

Animate centers with slow sin/cos — motion stays cheap because it’s still one quad.

Next

Stack multiple waves into richer color fields.