Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a Smiley Face - Part 4

Public visualization

Viewing a saved revision (read-only)

fa993bc3a4334a7f95ee0bf131e17a26

Let's make a Smiley Face - Part 4

0 stars1🌍 Public
OOlowogoke Seun
Last edited Sep 30, 2021
Created on Sep 30, 2021

This example shows a smiley face built with React and D3, rendered as SVG. It demonstrates how to compose reusable React components for static shapes: a yellow background circle with a black stroke, two black eye circles, and a mouth drawn as an arc path. The D3 `arc` generator defines the mouth’s inner and outer radii, start and end angles, and stroke width, with positioning handled via SVG group transformations. The code uses React 17, D3 v5, and the `arc` API in a declarative, data-driven layout.

AI-generated description

Halfway towards a smiley face.