Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
DDebangshini Bhattacharjee
Last edited Feb 4, 2026
Created on Feb 4, 2026

A cheerful animated face built entirely from D3.js SVG primitives, with eyebrows that raise and lower repeatedly via chained `transition` calls. The code constructs a yellow circle, two eyes, rectangular brows, and a mouth drawn with the `d3.arc` generator, then animates the eyebrow group’s transform over two-second intervals. The example demonstrates basic SVG shape composition and sequential transitions using d3-selection and d3-shape functions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

A playful SVG face built with D3.js v5 features a large pink circular head, black eyes, and animated eyebrows that shift upward and back. The face includes a nose, mouth, teeth, and additional facial features drawn using D3’s `arc` generator and basic SVG shapes like `circle` and `rect`. The code demonstrates fundamental DOM manipulation through selections and chained `transition().duration()` calls to create the eyebrow motion on a yellow background.

PPrathyusha Jampala
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 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
95% 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
95% match
Loading thumbnail…

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

A smiling face is drawn with SVG shapes, with a yellow circle for the head, two eyes, and a mouth formed using the d3.arc path generator. The animated eyebrows, rendered as rectangles, repeatedly transition upward and back down over two-second intervals using D3's transition method. The example demonstrates fundamental DOM selection and manipulation through d3.select, attribute setting, and chained transitions, operating entirely within a 960×500 SVG canvas.

Ddheeraj1509
95% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation and SVG rendering with D3.js. The face is constructed from SVG circles for the eyes and face, a path created with the `d3.arc` function for the mouth, and rectangles for the eyebrows. Animated eyebrow movement is achieved using `transition()` and `attr` chaining over two 2000-millisecond intervals. The example uses D3 v5 and shows how to select and manipulate SVG elements with data-driven methods.

NNiharika Reddy Amanaganti
95% match
Loading thumbnail…

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

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating up and down repeatedly. The face is drawn using D3.js v5, building circles, rectangles, and a mouth path through basic DOM selection and appending. Eyebrow movement is achieved with chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports `select` and `arc` from D3, computes layout from the SVG’s dimensions, and uses inline attribute settings for styling and positioning.

117761A04F1
95% match