Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Learn to draw smile with d3

Public visualization

Viewing a saved revision (read-only)

25da19dfc2674a52aa9ccd9153d42602

Learn to draw smile with d3

1 star7🌍 Public
AAjit Singh
Last edited Dec 8, 2020
Created on Dec 8, 2020

An animated smiley face drawn with SVG demonstrates reusable D3 features. Yellow circle, black-outlined head, and eyes are static shapes, while the eyebrows animate through chained `transition.attr` calls that move them up and down over 500ms intervals. The mouth uses the `d3.arc` generator, with a semicircular path defined by inner/outer radii and start/end angles. Coordinates rely on explicit SVG attributes, and the face is centered via a `translate` transform on a group element.

AI-generated description

An example including some commonly used features of SVG.