Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Viewing a saved revision (read-only)

36382a0aff644739b4628c0b5dbf4782

Let's make a face with D3.js!

0 stars0🌍 Public
RRafael Campos
Last edited Apr 22, 2020
Created on Apr 22, 2020

An animated yellow face with bouncing eyebrows and a morphing mouth is drawn in SVG using D3.js v5. The face is composed of circles, rectangles, and an arc-generated path, all centered within a 960×500 viewport. Transitions animate the eyebrow group’s vertical position over two seconds and change the mouth’s inner radius between 150 and 0 over three seconds, looping indefinitely via a `while(true)` block. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to orchestrate the continuous motion.

AI-generated description