Skip to main content
100%

SVG Fundamentals

✓ Published3🌍 Public
SSerind Joshua McCue
Last edited Aug 18, 2022
Created on Aug 18, 2022
Forked from HTML Starter

This example shows a stylized cartoon face built entirely from SVG primitives, including a yellow circle for the head, two black eye circles, and a curved mouth generated with d3’s arc generator. The face is composed through reusable React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which accept numeric props for positioning and sizing. The FaceContainer wraps all elements inside an SVG group that translates to the canvas center, while the mouth’s path is computed using d3.arc with specified inner and outer radii and angular ranges. The final rendering relies on React 18 and d3.v7, producing a static visualization without interaction or data binding.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes