Skip to main content
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Iidwann-eng
Last edited Mar 16, 2020
Created on Mar 16, 2020

This example builds a cartoon face from basic SVG shapes—a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth—all positioned relative to the center of the viewport. The code uses D3.js v5's `select` and `arc` APIs to construct the geometry, and SVG `transition().duration()` to animate the eyebrows downward by 50 pixels and back over two seconds. The rendering approach is fully declarative, with the face components grouped and transformed together, and all coordinates computed from the SVG element's width and height attributes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes