Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Smiley face. Part 1

Public visualization

Viewing a saved revision (read-only)

00ee13b5f2bf4889910b6c3bae1348cc

Smiley face. Part 1

0 stars1🌍 Public
SSavenkov Igor
Last edited May 10, 2022
Created on May 4, 2022
Forked from HTML Starter

This example shows a grid of 18 smiley faces, each with randomized facial features such as eye offset, eye radius, mouth width, and stroke thickness. The faces are rendered as SVG circles and paths using React components, with the mouth arc generated by the `d3.arc()` API. A shared `FaceContainer` translates the center point, while `BackgroundCircle`, `Eyes`, and `Mouth` compose each face. The data is generated procedurally with `d3.range()` and `Math.random()` in the top-level `App` component.

AI-generated description

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

See also React Starter.