Skip to main content
SimilarExport ZIP
100%

Forking with this Face for Fun.js!

✓ Published0🌍 Public
Ddldowning
Last edited Feb 25, 2023
Created on Feb 21, 2023

Two cartoon faces rendered side-by-side in SVG each animate their eyebrows upward and downward in a repeating two-second transition. Built with D3 v5, the example constructs each face from circles, rectangles, and arc paths, positioning elements via `svg.append` and `g.attr` transforms. Duplicated code blocks define a red face with a hat and collar, and a blue face with asymmetric pupils, showing fundamental DOM manipulation through D3 selections, `transition.duration`, and the `arc` generator for the nose and mouth shapes.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

A smiling face rendered in SVG animates its eyebrows upward and downward in a looping two-second cycle. The face is constructed entirely through D3.js v5 DOM manipulation, using `select` to target the root `svg` element, then appending and positioning circles for the eyes, rectangles for the eyebrows, and a path built from `arc` for the mouth. The eyebrow animation is driven by chained `transition().duration(2000)` calls that alternately shift the parent group’s `transform` attribute, demonstrating basic tweened state changes on SVG attributes. The composition is centered via a translated group, with hardcoded spacing values for facial features.

VVamshisoleti09
89% match
Loading thumbnail…

ForkFaceReact

A cartoon face rendered in SVG animates its eyebrows in a looping sequence. The example builds the face from D3 shape primitives, including circles for the head and eyes, and an arc for the mouth, all positioned with a central translation. Using D3 v5's `select` and `arc`, it demonstrates chained `transition` calls to repeatedly move the eyebrow group up and down over two-second intervals. The code imports these D3 features via ES6 modules, with the library loaded from UNPKG and the visualization drawn to an SVG element.

WWilliam Gitta
89% match
Loading thumbnail…

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

A playful SVG face built with D3.js v5 shows a green circle with movable eyebrows, red ears, white teeth, and a frowning mouth. The code demonstrates fundamental DOM manipulation using `d3.select` and `d3.append` to construct shapes, while `transition()` animates the eyebrows upward and back down over four seconds. An `arc()` generator creates the mouth path, and rectangular teeth are bound to data via `selectAll().data().enter()`.

Bbhanuprasadk19
89% match
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
89% match
Loading thumbnail…

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

A D3.js animation builds a simple face from SVG primitives, with two green and orange concentric circles for the head, two circles for the eyes, and two rectangles as eyebrows. The eyebrows bounce vertically over four seconds via chained `transition().attr()` calls, while a path created with the `arc` generator forms a static mouth. The example demonstrates fundamental DOM manipulation through `select` and `append`, using D3 v5 to target an SVG element defined in the HTML.

NNavaneeth-Ragi
89% match
Loading thumbnail…

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

This example draws a cartoon face in SVG using D3 version 5. It builds the head, eyes, eyebrows, and mouth from primitive shapes, positioning them with coordinate math and an SVG transform. The code uses D3’s `select` to target the element, `arc` to generate the mouth path, and a chained `transition()` call to animate the eyebrows up and down over two seconds. A yellow circle, black eye circles, and gray eyebrow rectangles are styled via attributes.

Jjlspangl
89% match
Loading thumbnail…

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

A D3.js animation builds a smiling face from SVG primitives, with eyebrows that repeatedly shift up and down over two-second intervals. The code uses `d3.select` and `d3.append` to construct the face, and the `d3.arc()` API generates the mouth as an annular sector. The eyebrows animate via chained `transition().duration(2000)` calls on an SVG group, demonstrating fundamental DOM manipulation and animated attribute updates within an SVG canvas.

HHarishma Nallala
88% match
Loading thumbnail…

Forking

A smiling face rendered in SVG continuously raises and lowers its rectangular eyebrows through chained D3 transitions. The example demonstrates fundamental DOM manipulation with D3 v5, using selection methods like `append` and `attr` to build the face from basic shapes—a circle for the head, arcs for the mouth, and rectangles for the brows. The code explicitly uses `d3.arc` and `d3.select` to construct the mouth path and animate the eyebrow group’s `transform` attribute over timed durations.

Nnagasai-gummadi
88% match