Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Make a face with the use of D3.js

Public visualization

Viewing a saved revision (read-only)

c4ae652f42674e7ead3ef6ab91ea96fc

Make a face with the use of D3.js

0 stars1🌍 Public
Ssimon0863
Last edited Oct 28, 2020
Created on Oct 28, 2020

A yellow SVG face with black-outlined features animates its eyebrows and mouth. D3.js v6 shapes the face using `arc()` for the smile and appended `circle` and `rect` elements for the eyes and brows. Chained `transition()` calls with a two-second duration repeatedly move the eyebrows upward and adjust the mouth’s inner and outer radii, creating a looping expression. The face is centered and scaled using the SVG’s dimensions in a React-based starter.

AI-generated description

React Starter code.