Skip to main content
SimilarExport ZIP
100%

Making a face

✓ Published1🌍 Public
Rrcumani
Last edited Jul 4, 2019
Created on Jul 4, 2019
Forked from Hello VizHub

A yellow circle face with two eyes and eyebrows is rendered in SVG, with the right eyebrow animating upward and downward over two seconds. The mouth is drawn as a half-circle arc using the `d3.arc` helper. Built with D3 v5, the code uses `select`, `attr`, and chained `transition` calls to control the animation, positioning elements via SVG transforms.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a face

A yellow circle with eyes, eyebrows, and a mouth forms a face using D3 v5 selections and SVG shapes. The right eyebrow animates upward and back down via chained `transition().attr()` calls over two seconds each, while the mouth is drawn with `d3.arc()`. All elements are positioned relative to a centered group, with eyes offset by fixed pixel distances, creating a simple, animated cartoon face.

Ttlrdevere
95% match
Loading thumbnail…

Making a face

A yellow cartoon face is drawn on an SVG canvas, with eyes, eyebrows, and a mouth formed by D3 shape primitives. The eyebrows animate upward and downward in a looping transition, while the mouth is rendered using the `d3.arc` path generator. The example demonstrates importing `select` and `arc` from the D3 v5 module, manipulating SVG attributes, and applying chained `transition` calls with a two-second duration.

Ccornshoots
94% match
Loading thumbnail…

making a face

A yellow circle with black features forms a simple face, with two eyes and a mouth drawn using an SVG path. The eyebrows are animated rectangles that move down and back up over four seconds. The visualization uses D3 v6 selections to append SVG shapes and the `arc` generator from D3 to create the mouth path. The `transition` method handles the eyebrow animation, while the SVG coordinate system positions features around a central group.

Jjwu534@gmail.com
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
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
Loading thumbnail…

Make a face

A yellow circle with red eyes, green eyebrows, and a green mouth forms a simple face in the center of an SVG canvas. The eyebrows animate upward and back down in a repeated motion using D3 transitions. The code builds the face with SVG shapes—circle, rect, and path elements—and uses the d3.arc generator to create the mouth’s curved path. All geometry is defined relative to a centered group, and the transition chain moves the eyebrow group vertically.

KKarin Meersman
93% match
Loading thumbnail…

Let's Make a Face with D3.js

A yellow SVG face with a black outline appears, featuring two circular eyes and a smile rendered as an arc path, while its rectangular eyebrows move down and back up in a looping animation. Built with D3 v5, the code uses `select`, `arc`, and chained `transition().duration()` calls on SVG groups to animate the eyebrow transforms, with the face centered via a translated `<g>` element and dimensions read from the SVG attributes.

DDan Henri
93% 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
93% match