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 stars1🌍 Public
TTomas S
Last edited Nov 19, 2019
Created on Nov 13, 2019

A yellow SVG face with eyes, eyebrows, and an arc-based smile is built entirely with D3.js primitives. Circles form the eyes and face, rectangles create the eyebrows, and a path from `d3.arc()` draws the mouth. The eyebrows animate vertically through chained `transition().duration(500)`, shifting down then returning. The code reads the SVG's height and width attributes to center a root group, then positions facial features relative to that center.

AI-generated description

An example including some commonly used features of SVG.

Comments

Sign in to join the discussion.

MIT Licensed