🌍 Public
Viewing a saved revision (read-only)
ebc2b4717cf14a598fbcda7fb1168edb
Let's make a face with D3.js!
This example uses D3.js to build a cartoon face from basic SVG shapes, including a yellow circle for the head, circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The code relies on D3’s `select`, `arc`, and `transition` APIs to arrange elements around a central group, with eyebrow positions animated through chained `transition.attr` calls that raise and lower them over 2 and 1 seconds. The rendered output is an SVG canvas sized 960 by 500 pixels, with styling defined in a linked CSS file.
AI-generated descriptionAn example including some commonly used features of SVG.