Circle Outline

A filled circle uses distance from the center. An outline (ring) requires a different measurement: distance from the circle boundary.

Distance to the circle boundary

The boundary is every point at distance exactly r from the center. The distance from any pixel to that boundary is:

• d < r (inside): distance is r - d
• d > r (outside): distance is d - r
• d = r (on the circle): distance is 0.0

Smoothstep the outline

Where abs(d - r) < w, the mask is near 1 (the ring). Beyond w + 0.006, it's 0 (background).

Exercise

The exercise starts with ring = 0.0 (all background). Use 1.0 - smoothstep(w, w + 0.006, abs(d - r)) to compute the mask and reveal the circle outline.

Answer Breakdown

abs(d - r) treats the circle boundary as zero: distance is 0 on the ring itself, and grows inward and outward. smoothstep fades the mask based on that distance. w controls ring half-width, 0.006 controls edge softness.

Try w = 0.04 for a thicker ring, or r = 0.2 for a smaller circle.