Drawing shapes
Distance fields + step() turn math into a circle.
Shaders do not have a "draw circle" command — you decide, per pixel, whether that pixel is inside the shape. For a circle, measure each pixel’s distance from the center with distance(st, vec2(0.5)). Pixels close to the center have a small distance; far ones have a large distance.
Then step(edge, x) returns 0.0 when x is below edge and 1.0 when it is above — a hard cutoff. So 1.0 - step(0.3, d) is 1.0 (white) inside radius 0.3 and 0.0 (black) outside: a filled circle. Swap step() for smoothstep() and you get a soft, anti-aliased edge instead of a jagged one.
Draw a white circle in the center on black.
Compute d = distance(st, vec2(0.5)), then a filled circle of radius 0.3 with 1.0 - step(0.3, d). Put that value in all three color channels.