Skip to main content
SimilarExport ZIP
100%

Let's make a face

✓ Published0🌍 Public
SSven Wanner
Last edited Oct 30, 2020
Created on Oct 30, 2020

A yellow circle with a black outline forms a face, featuring two black eyes and an arc-shaped mouth drawn using d3.arc. The animation uses D3 transitions to make the left eyebrow move up and down repeatedly, while the right eyebrow remains static. Built with D3 v6, the visualization manipulates SVG elements like circle, rect, and path, with all positioning centered via SVG coordinate transforms.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlined features animates its eyebrows up and down. The visualization builds the face using d3.svg append operations, positioning circles for eyes, rectangles for brows, and a d3.arc path for the mouth. The eyebrows transition vertically via d3.transition. The SVG face is centered using a translated group, with all coordinates computed from the viewport dimensions.

IIcecreamneverfall
96% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlined features animates its eyebrows up and down. The visualization builds the face using d3.svg append operations, positioning circles for eyes, rectangles for brows, and a d3.arc path for the mouth. The eyebrows transition vertically via d3.transition. The SVG face is centered using a translated group, with all coordinates computed from the viewport dimensions.

IIcecreamneverfall
96% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlines displays two eyes, eyebrows, and an arc-shaped mouth on an SVG canvas. The eyebrows animate vertically, moving down and back up over a sequence of transitions. Built with D3 v5, the visualization uses `select` and `arc` from the D3 module to construct the facial features, with `transition` and `duration` controlling the eyebrow movement. The code generates the mouth using an arc generator with specified inner and outer radii and angles.

BbeauMarko
95% 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
95% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black eyes and animated eyebrows is drawn using SVG. The eyebrows move up and down through chained transitions that alternate their vertical offset. D3 v6's `select`, `arc`, and `transition` APIs construct the face, with the mouth rendered as an arc path and eye positions set via fixed coordinates.

BbeauMarko
94% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with a black outline forms a face, complete with two eyes, animated eyebrows, and an arc-shaped mouth. The eyes and eyebrows are simple SVG circles and rectangles, while the mouth uses a path generated by D3's `arc` function. The eyebrows animate via chained `transition` calls, moving down and back up over two seconds each way. The visualization is built entirely with D3 v5, using its `select` and `arc` modules to render and manipulate SVG elements.

Ffredferramenta
94% match
Loading thumbnail…

Let's make a face with D3

A yellow circle forms a face, with two black eyes and a wide arc-shaped mouth. The eyebrows, rendered as rectangular bars, animate upward and then back down in a looping motion. Built with D3 v6, the visualization uses SVG elements and D3’s `transition()` method to adjust the eyebrow group’s transform attribute over two-second intervals. The face is centered using a translation on a group element, with the mouth created via the `arc()` generator.

Jjkmingwen
94% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with a black outline forms a face, complete with two black eyes, rectangular eyebrows, and a mouth drawn as an arc. The right eyebrow animates upward over two seconds using D3's `transition()` method. The example uses D3 v6 modules `select` and `arc` within an SVG, constructing the face from primitive shapes and positioning them via a centered group transform.

DDICKO Alhassane
94% match