Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Smiley Face Part 1

Public visualization

Viewing a saved revision (read-only)

736acebe4ed84637b9e2f4331c78fc87

Smiley Face Part 1

0 stars0🌍 Public
IIsaac Yuen
Last edited Apr 28, 2022
Created on Apr 27, 2022
Forked from HTML Starter

A grid of eighteen smiley faces renders in React with D3 v7, each face varying randomly in stroke width, eye size and position, and mouth dimensions. The example shows how SVG shapes compose into a reusable `Face` component using D3's `arc` generator to draw each mouth. The `FaceContainer` translates a central group, while `BackgroundCircle`, `Eyes`, and `Mouth` define the facial features. Random parameters from the `d3.range` map generate the unique faces.

AI-generated description

Halfway towards a smiley face