Let's Make a Face

100%

Let's Make a Face

✓ Published5🌍 Public

Last edited Oct 26, 2020

Created on Jul 13, 2020

Forked from Let's make a face with D3.js

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

95% match

Loading thumbnail…

Let's Make a Face

IIcecreamneverfall

95% match

Loading thumbnail…

Let's make a face

A yellow circle face with black eyes and rectangular eyebrows appears on an SVG canvas. The code uses D3 v5 selections, the `arc()` generator for the mouth, and chained `transition().duration()` calls to animate the eyebrows downward and back. All shapes are positioned relative to a centered group using explicit pixel offsets for eye spacing and eyebrow placement.

Lloicvdk

94% match

Loading thumbnail…

Let's make a face!

A yellow circular face with gray outlines animates its facial features using D3 transitions. Two circular eyes remain fixed, while rectangular eyebrows and the mouth’s arc path shift vertically and change radius over timed intervals. Built with d3.js v5, the example uses `select`, `arc`, and chained `transition().duration()` calls to cycle eyebrow positions and mouth size on an SVG canvas.

JJamie919

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!

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