2D SDF composition

How it works

A signed distance field describes a shape by one number per point: how far it is from the edge, negative inside. The useful part is that distances combine. The min of two fields is both shapes at once (a union), the max is only where they overlap (an intersection), and max(a, -b) is the first shape with the second cut out of it (a subtraction). A smooth minimum blends two shapes into one with a rounded joint, as if they were made of clay.

So a complex shape doesn’t need its own formula. A rounded rectangle is a box whose distance has been shrunk and grown back; a chevron is two line segments in a union; a ring is a disc minus a smaller disc. The result is still a distance field, so the next step can use it the same way.

That is what makes composition worth learning. One distance gives you several looks for free: the fill (below zero), a stroke (near zero from either side), a glow or a soft drop shadow (a wide smoothstep outside), each one an edge cut from the same number. And because the edge is cut from a distance, it can be anti-aliased exactly, one pixel wide at any size, with the screen-space derivative fwidth. UI elements, icons, map markers and font glyphs are drawn this way when they must stay sharp at any zoom.