Let's Make a Face

100%

Let's Make a Face

✓ Published1🌍 Public

Last edited Jun 1, 2020

Created on Jun 1, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face

IIcecreamneverfall

100% match

Loading thumbnail…

Let's make a face

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.

SSven Wanner

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 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!

This visualization shows a simple, stylized face constructed from basic SVG shapes, including a yellow circle head, black circular eyes, red arc mouth, and rectangular eyebrows. A smooth, repeated animation moves the eyebrows upward and back down over two seconds, creating an expressive effect. Built using D3 v5, the code leverages SVG primitives and D3’s transition API to animate the eyebrow group’s transform property. The face is centered using a translated group, and the mouth is drawn with a d3.arc path generator.

AAndres Bizzarri

94% 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

94% match

Loading thumbnail…

Let's Make a Face Part I

A yellow circle with black outlines forms a static face, complete with two eyes and a mouth drawn as an arc. The only animated element is the right eyebrow, which transitions downward and then back upward over two seconds using chained D3 transitions. The visualization is built with D3 v5, using `select`, `arc`, and `transition` APIs to construct SVG shapes and animate them. The face is centered within a fixed 960×500 SVG canvas, with all elements positioned relative to the center via a translated group.

Oonika123

93% match

Loading thumbnail…

Let's make a face!

A yellow circle face is drawn with SVG in D3 v5, featuring two eyes, animated eyebrows, and a smile created with an arc path. The eyebrows transition vertically via chained `transition().duration()` calls, moving down and back up. The face is centered using a translated group element, with circles and rectangles positioned relative to eye spacing and offset constants. The code uses `select`, `arc`, and SVG attributes to construct the static facial features while the eyebrows animate independently.

Aases1996

93% match