Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Smiley Face Part 1

Public visualization

Viewing a saved revision (read-only)

9ccd5dbe9bc04c8190994d58423e55c8

Smiley Face Part 1

0 stars3🌍 Public
BBen Brophy
Last edited Dec 29, 2021
Created on Dec 29, 2021
Forked from Hello HTML

A grid of eighteen identical smiley faces appears, each rendered as a yellow circle with black stroke, two eyes, and an arc-shaped mouth. The faces vary randomly in eye radius, mouth width, and mouth radius, creating subtle differences across the grid. Built with React and D3 v7, the visualization uses D3’s `arc()` generator to define the mouth path and SVG circles for the face components. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` within a translated `<g>` element, mapping each face from a `range(6*3)` array.

AI-generated description

Half way towards a smiley face.