Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Let's make a face with

✓ Published1🌍 Public
AAbdulazizfh
Last edited Jan 27, 2021
Created on Jan 27, 2021

A yellow face with a black outline appears on a red background. The face features two circular eyes, rectangular eyebrows, and a mouth shaped as a semi-circular arc. The eyebrows animate by moving downward and back upward over a four-second cycle. The visualization is built using D3.js, with SVG shapes (`circle`, `rect`, `path`) positioned via transforms. The mouth is drawn using D3's `arc` function, and the eyebrow animation is driven by chained `transition` calls. The red background is set via an inline SVG style.

AI-generated description

1

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Lets make a face

A yellow face with black outlines is drawn on an SVG canvas using D3 v6. The animated eyebrows move up and down via chained `transition().duration()` calls. The face is constructed from primitive shapes: circles for the head and eyes, and a path generated with the `arc()` API for the mouth. The code imports `select` and `arc` directly from D3.

EEsteLima
91% match
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
90% match
Loading thumbnail…

Fork of Let's Make a Face

This visualization presents a cheerful cartoon face composed of simple geometric shapes: a yellow circular head, black eyes, rectangular eyebrows, and an arc-shaped mouth. The right eyebrow animates by smoothly moving downward and then back to its original position through chained transitions. Built with D3 v5, the example uses D3's selection methods to append SVG elements and the `arc()` helper to generate the mouth's path, with the animation driven by D3's `transition().duration()`.

Aape-ape-ape
90% 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
90% 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
90% 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
90% match
Loading thumbnail…

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

This example animates a cartoon face built from basic SVG shapes, with eyebrows that move up and down over time to create a playful expression. The face consists of a yellow circle for the head, two black-outlined eyes, and a mouth drawn as a curved arc. The code uses D3.js v5 to construct and manipulate the SVG elements, and leverages D3's `transition()` method to animate the vertical position of the eyebrows. The static parts of the face (head, eyes, mouth) are defined with D3's `select` and `append` APIs, while the mouth is generated with `d3.arc`. The animation runs in a continuous loop, making the face appear to raise and lower its brows indefinitely.

DDINESH SAI BOPPANA
89% match
Loading thumbnail…

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

A yellow circle face with black-outlined eyes, animated eyebrows, and a curved mouth is rendered in an SVG. The eyebrows transition up and down repeatedly using D3 `.transition().duration()`. The code constructs the face with d3-selection and d3-arc, positioning elements via SVG transforms. The mouth path is generated using `arc()` with inner and outer radii, while eye and brow shapes are drawn as SVG circles and rectangles on a 960x500 canvas.

DDINESHSAIBOPPANA7
89% match