Skip to main content
100%

Jaeyong's Blog

✓ Published0🌍 Public
JJaeyong Lee
Last edited Aug 24, 2021
Created on Aug 21, 2021
Forked from HTML Starter

This interactive visualization displays a cartoon smiley face constructed with SVG shapes, including a circular head, eyes, cheeks, mouth, and eyebrows, all centered on a 960x500 canvas. The face’s size scales continuously based on a range slider input, which adjusts the radius and proportionally updates all facial features. Built with React for rendering and D3’s `arc()` generator for the curved eyebrows, the code recalculates geometry on each slider event via `ReactDOM.render`. A random initial radius and a refresh loop demonstrate the dynamic updating of SVG attributes through React state changes.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes