Let's Make a Face Part I

100%

Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Nov 4, 2020

Created on Nov 4, 2020

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

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

93% match

Loading thumbnail…

Let's Make a Face

IIcecreamneverfall

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

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

92% match

Loading thumbnail…

let's make a face

A yellow circle with a black outline serves as a face, featuring two black eyes and a curved mouth created with the `arc` generator. The left eye animates horizontally via chained `transition().duration()` calls, shifting 50 pixels to the right and back over two seconds, while the right eye and mouth remain static. Using D3 v5 selections, the SVG elements are appended inside a centered group and the animation relies on D3’s built-in transition system. The face is rendered entirely with SVG shapes on a 500×500 canvas.

AAloha1403

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

92% match