Exo let's make a face

100%

Exo let's make a face

✓ Published0🌍 Public

Last edited Jul 22, 2020

Created on Jul 22, 2020

A yellow circle face with black eyes, eyebrows, and a curved mouth is centered on an SVG canvas. The eyebrows animate upward and back downward in a repeated two-second transition using d3’s `transition().duration()`. The code constructs the face with d3 selections, an `arc()` generator for the mouth, and SVG elements like `circle` and `rect`, all grouped and transformed based on configurable constants for eye spacing and offsets.

AI-generated description

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Let's make a face!

A yellow circle with a black outline, two dark eyes, and an arc-shaped mouth form a simple face. The eyebrows, drawn as rectangles, move up and down in a looping animation using D3's transition system. The SVG is generated with the `select`, `append`, and `arc` APIs, and the eyebrow movement is orchestrated with the `transition().duration()` and `.on("end", ...)` methods to repeat the motion. The face is centered in a 960x500 SVG canvas using a group transform.

MMatan

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

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

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

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

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

85% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with black strokes serves as a face, featuring two eyes, animated eyebrows that move up and down over two-second transitions, and a mouth drawn as an arc. The example demonstrates D3 v5's selection, transition, and arc generators to construct and animate SVG shapes. Eyebrows transition between vertical offsets using `transition().duration()`, while the mouth uses `d3.arc()` with specified inner and outer radii and angular extents. The SVG canvas is centered via a translation transform, and all elements are positioned relative to that origin.

Xxfqx92

85% match