🌍 Public
Viewing a saved revision (read-only)
3e691e227e9b42178fd9e2d0234dc6b3
Let's Make a Face
This example displays a grid of 80 yellow smiley faces, each rendered as an SVG using React components. The faces are constructed from separate reusable parts—a background circle, two eyes, and a mouth created with D3’s `arc` generator for the curved smile. Each face uses randomized eye radius values to introduce slight variation, while all other dimensions like eye offset and mouth width remain fixed. The code combines React’s component composition with D3 v7’s shape utilities, embedding the SVG elements through a `FaceContainer` that centers the drawing within the viewport.
AI-generated descriptionHalf way towards a smiley face.