Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

smiley face with svg

Public visualization

smiley face with svg

0 stars1🌍 Public
Ddmr
Last edited Nov 13, 2021
Created on Nov 12, 2021
Forked from HTML Starter

A smiling face rendered in yellow with black outlines is drawn using SVG primitives within a React application. The face is composed of a large circle for the head, two smaller circles for the eyes, and a curved path for the mouth, all positioned relative to a central origin point. The React component uses D3's `arc` function to generate the mouth's path data, calculating its geometry mathematically rather than hard-coding coordinates. The SVG is displayed in a full-viewport HTML page that loads React, ReactDOM, and D3 from a CDN.

AI-generated description

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

See also React Starter.

extra notes

Smiley face part 1 uses svg to create the face and two eyes but we need to be able to use some math to set items out without hard coding all the x and y offsets

so it's time for REACT

Comments

Sign in to join the discussion.

MIT Licensed