Smiley
Four identical smiley faces form a repeating grid, each rendered as a yellow circle with black outlines, two eyes, and a mouth. The visualization shows how React components compose to build a face using SVG primitives. The code defines reusable `Face`, `Eye`, `Mouth`, and `BackgroundCircle` components, with the mouth path generated by D3’s `arc()` API using inner and outer radii and fixed start and end angles. The `FaceContainer` wraps elements in a translated SVG group, and the app renders the same face four times via an array map, demonstrating modular, parameterized component reuse.