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)

66115123703549c58cce603134f95b87

Let's make a face with D3.js!

0 stars0🌍 Public
Sstelson
Last edited Apr 26, 2020
Created on Apr 26, 2020

This example uses D3.js v5 to build a cartoon face from SVG primitives. A large yellow circle forms the head, with two black circles for eyes placed at fixed offsets and a yellow arc path generated via the `arc()` function for the mouth. Rectangular eyebrows are animated with chained `.transition()` calls, moving downward and back over two seconds each. The SVG canvas is set to 960 by 500 pixels with a red background, and all shapes are positioned relative to the center using D3's selection and attribute methods.

AI-generated description

An example including some commonly used features of SVG.

<iframe width="560" height="315"