Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Let's make a face with D3.js!

✓ Published1🌍 Public
Ppriyankabpally@gmail.com
Last edited Dec 9, 2025
Created on Dec 9, 2025

A yellow face with black-outlined eyes and brows animates its eyebrows upward and back downward over four seconds. The figure is drawn with D3 selections, using SVG `circle` elements for the face and eyes, `rect` elements for the brows, and a `path` generated by the `d3.arc()` helper for the mouth. The brow motion relies on chained `transition.attr` calls targeting a transformed group, all rendered in a single SVG canvas.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js

A yellow circle with black facial features animates its eyebrows in a looping motion. The face is drawn with SVG elements in D3.js v3, using a `circle` for the head and eyes, `rect` elements for the eyebrows, and an `arc` path for the mouth. The eyebrows move vertically via chained `transition` calls with a 2000-millisecond duration, shifting down then returning to their original offset.

SSerena Fang
95% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

Nnsatyaprakash22
95% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

Nnsatyaprakash22
95% match
Loading thumbnail…

Fork of Let's make a face with D3.js

A yellow circle face with black eyes, eyebrows, and a mouth is drawn in SVG using D3 v6. The mouth is generated with the `arc` generator, while the eyes and eyebrows are circles and rectangles. Eyebrows animate vertically via chained `transition().duration()` calls, moving down and then back up, using D3's selection and transition methods.

SSerena Fang
94% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiling yellow face animates against a black background, with blue rectangular eyebrows that bounce upward and downward, a red-outlined mouth, white teeth that rotate side to side, and a tongue. The code builds the face using D3.js v5 selections and the `d3.arc` shape generator, appending SVG circles, rects, and paths to a 1000x500 canvas. Multiple `transition().duration()` calls drive the eyebrow movement and teeth rotation, while static elements like eyes, nose, and mouth are positioned via SVG transforms.

Pprachow
94% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js

A smiling face built from yellow and black SVG shapes animates its eyebrows upward and downward in a looping motion. The example constructs the face with D3 v6 selections, positioning eyes as circles, eyebrows as rectangles, and a mouth as a path generated by the `arc` generator. Transitions chain two 2-second `transition` calls on the eyebrow group to move it vertically, creating the expressive blink-like effect within the fixed 960×500 viewport.

JJorrr2
94% match
Loading thumbnail…

Fork of Let's make a face with D3.js

A stylized yellow SVG face, built with D3.js, animates its eyebrows in a looping up-and-down motion. The face is constructed from basic shapes: a circle for the head, two circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth. The eyebrows move repeatedly via chained `transition().duration()` calls that translate their containing group. All elements are centered using SVG transforms, with dimensions derived from the SVG element’s height and width attributes.

JJorrr2
94% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow cartoon face rendered with SVG shapes animates its eyebrows up and down. The code builds the face from concentric circles for the head, eyes, and mouth using D3 selections and an arc generator. D3 transitions with a two-second duration repeatedly move the eyebrow group vertically, creating a looping expression. The example is implemented with D3 v5, drawing directly to an SVG canvas within a 960 by 500 pixel viewport.

AAmrit Adhikari
94% match