Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Creating a Smiley face with D3

Public visualization

Viewing a saved revision (read-only)

4cdf237995c9446ea0f3b3bd65f00702

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.