Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Smiley Face Part 1

Public visualization

Viewing a saved revision (read-only)

a139cb2165c843d4afd76320befdbe75

Smiley Face Part 1

0 stars1🌍 Public
Ddavebell
Last edited Jul 14, 2021
Created on Jul 13, 2021
Forked from HTML Starter

This example renders a grid of procedurally generated smiley faces using React and D3 v7. Each face is composed of SVG shapes—a yellow background circle, black eyes, and a mouth created with the d3 `arc` generator. The `Face` component composes smaller components (`BackgroundCircle`, `Eyes`, `Mouth`) inside a `FaceContainer`, while the `App` maps over an array of 18 faces, randomizing eye offset, eye radius, mouth width, and mouth radius for each. The result is a playful, varied collection of faces displayed in a fixed-size SVG canvas.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.