Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Hello HTML

Public visualization

Viewing a saved revision (read-only)

bddc5608b84d4f1b957af388f74c11cd

Fork of Hello HTML

0 stars1🌍 Public
LLaura Brown
Last edited Jan 15, 2025
Created on Jan 14, 2025
Forked from Hello HTML

This example renders a grid of five smiley faces using React components, mapping over an array to produce each face. The faces are built from modular SVG primitives, including a pink background circle, eyes with layered white highlights, and a mouth drawn with a D3 arc generator. The `arc()` function from d3-shape defines the mouth’s inner and outer radii, corner radius, and start/end angles, while the FaceContainer wraps all elements in a centered SVG group. Each face’s eye radius, mouth radius, and mouth end angle are randomized, producing slight variations across the repeated faces.

AI-generated description

Halfway toward a smiley face