Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js

Public visualization

Let's make a face with D3.js

0 stars0🌍 Public
Ssgzzhinde
Last edited Dec 18, 2020
Created on Dec 18, 2020

A smiling face drawn with SVG elements animates its eyebrows and mouth via D3 transitions. The example builds the face from primitive shapes—a yellow circle for the head, circles for eyes, rectangles for brows, and an arc path for the mouth—all positioned within a centered group. Using d3.select and d3.arc, it applies chained transition.attr methods over three-second durations to shift the brows upward and slide the mouth sideways, while static hair paths use CSS stroke styling.

AI-generated description

Shapes with SVG and CSS

Comments

Sign in to join the discussion.

MIT Licensed