Skip to main content
SimilarExport ZIP
100%

Let's make a face

✓ Published0🌍 Public
Ffigment-tree
Last edited Mar 8, 2021
Created on Mar 3, 2021

This example builds a smiling face from basic SVG shapes using D3.js v6. A yellow circle forms the head, with two eyes and a mouth drawn as a path using the `arc` generator. The eyebrows, rendered as rectangles, animate upward and back down via chained `transition().duration(500)` calls. The code imports `select` and `arc` from D3, positions elements relative to a centered group, and uses SVG attributes like `cx`, `cy`, and `d` for layout.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face

This example builds a smiling face from basic SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a semi-circular mouth drawn with `d3.arc`. The eyebrows animate upward and back down using chained `transition().duration()` calls on a `<g>` element. The code uses D3 v5 selection methods and `d3.arc`, with the face centered via a translation transform. The animation runs once on load, and no data source is involved.

PPabloReyesBetanzo
95% match
Loading thumbnail…

Let's make a face!

A smiling yellow face is drawn in SVG using D3 v7, with a circle for the head, smaller circles for eyes, and an arc-generated path for the mouth. The eyebrows, rendered as rectangles, animate upward and back down via chained `transition` calls. This example demonstrates basic SVG shape creation and animation with D3's selection and arc API.

LLYD
94% match
Loading thumbnail…

Let's Make a Face

A smiling face built from basic SVG shapes appears on a yellow circle, with eyebrows that bob up and down through a looping transition. The example uses d3-selection and d3-shape to construct the face, positioning eyes, eyebrows, and a mouth with coordinate offsets. An arc generator creates the mouth, while chained transition calls animate the eyebrow group’s vertical position over two-second intervals, producing a playful expression. The code renders entirely in SVG within a 960 by 500 viewport.

Rryandebattista
93% match
Loading thumbnail…

Let's make a face

A cheerful, schematic face is built from SVG primitives in a 960×500 viewport, centered via a translated group. Its yellow head, black-outlined circle, two dark eyes, and a wide mouth arc are composed with D3’s `select`, `append`, and `arc` APIs. The eyebrows, drawn as rectangles, animate upward and back down over two seconds using chained `transition().duration(2000)` calls on the group’s `transform` attribute, while the rest remains static.

Sscarlet shao
93% match
Loading thumbnail…

Let's make a face

This example uses SVG shapes to draw a simple smiley face. The code constructs a yellow circle for the head, two black circles for the eyes, and a mouth created with an arc path, all positioned relative to the SVG’s width and height. It demonstrates basic SVG attributes and the `d3.arc` generator from D3 v6 to define the mouth’s curved shape, with static styling applied via CSS.

AApurva
93% match
Loading thumbnail…

Let's make a face

A yellow circle with black outlines forms a simple face, complete with eyes, eyebrows, and a mouth. The eyebrows animate by moving up and down repeatedly over two-second transitions. Built with D3 v5, the example uses `d3.select`, `d3.arc` for the mouth path, and SVG elements like circles and rectangles. The rendering is SVG-based with animation handled through chained `transition().duration()` calls.

SSun-XH
93% match
Loading thumbnail…

Let's make a face

A yellow circle becomes a smiley face as the animation runs. D3 v5 builds the face from SVG shapes—a circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc path for the mouth—centered within an SVG canvas. The left eyebrow briefly moves upward via chained `transition` calls, while all other elements remain static. The code uses d3-selection, d3-arc, and SVG attributes, with no external data source.

Jjf1978
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle head, two eyes, animated eyebrows, and an arc-based mouth. The code constructs the face with `d3.select`, `append`, and `d3.arc` for the mouth path, while the eyebrows animate up and down using `transition().duration()`. All elements are centered within an SVG canvas using a translated group, and the rendering relies entirely on SVG attributes rather than external data.

VVito
93% match