Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Creating a Smiley face with D3

Public visualization

Creating a Smiley face with D3

0 stars1🌍 Public
AAndy Chang
Last edited Sep 28, 2022
Created on Sep 28, 2022

A yellow smiley face rendered in SVG shows a mouth moving up and down while the entire face scales in size. D3 v7’s selection, `arc`, and `transition` APIs are used to construct the circle, eyes, and curved path for the mouth, with `setInterval` triggering repeated two-second transitions. Static SVG attributes position the face, while the mouth’s transform and the circle’s scale animate independently.

AI-generated description

An example including some commonly used features of SVG.

Comments

Sign in to join the discussion.

MIT Licensed