Circles, boxes & lines

How it works

A fragment shader can’t draw a circle the way a drawing app does. There is no “circle” command. Every pixel runs the same code on its own and decides one thing: what color am I? A shape appears when that decision depends on where the pixel is.

The recipe has two parts. First, turn the pixel’s UV into a number that says how far it is from the shape: the length of the vector to a center for a circle, the distance to the nearest edge for a box, the distance to the closest point of a segment for a line. Then cut that number with a threshold: inside when it is smaller than the radius, outside when it is larger. A hard step gives a jagged edge; a smoothstep across a pixel or two gives a clean one, and across more it gives a soft glow.

Everything after that is about what you feed the threshold. Take the absolute difference from the radius and the disc becomes a ring. Let the radius follow a sine of time and the ring breathes. The same measure, combined with others, is the start of the signed distance fields the 2D SDF composition and raymarching techniques build on.

Engines and tools rarely ship this as one node because it is so small: a length and a smoothstep, or a Distance node and a SmoothStep node in a graph. That is also why it ports everywhere unchanged.