Fork of Let's Make a Face - Modifications

100%

Fork of Let's Make a Face - Modifications

✓ Published1🌍 Public

Last edited Jan 11, 2021

Created on Jan 10, 2021

This fork of "Let's Make a Face" animates a cartoon face with blinking eyebrows and a fixed smiling mouth, all rendered as SVG. The code uses D3 v6 selections and transitions, with `transition().duration()` to shift eyebrow rectangles up and down repeatedly. The face is composed of D3 shapes—a circle for the head, circles for eyes, rects for brows, and a path generated by the `d3.arc` API for the mouth. The entire face is centered via a group transformation, with static styling, including an orange head and black features.

AI-generated description

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

91% 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

91% match

Loading thumbnail…

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

A fork of an earlier D3.js face-building exercise, this piece renders a static SVG cartoon face and then animates its eyebrows in a looping up-and-down motion. The face is constructed from basic geometric primitives like circles, rectangles, and an arc-based mouth, with features centered and positioned using transforms. The animation relies on chained `transition().duration()` calls to move the eyebrow group, while the overall drawing is handled with D3 selections and the `arc` generator from the d3-shape module. All elements are rendered in an SVG container.

Mmanojgne

91% match

Loading thumbnail…

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

This fork animates a D3.js smiley face by moving its eyebrows up and down in a repeating sequence. The code demonstrates fundamental DOM manipulation, building the face with SVG shapes including a blue circle head, two eyes, eyebrow rectangles, and an arc-generated mouth. The animation uses D3’s `transition().duration()` chained calls to shift the eyebrows’ transform attribute between two vertical positions over two-second intervals. The example uses d3-selection and d3-shape APIs, with the SVG appended to a 960×500 canvas and coordinates centered via a translation.

Rradhadevarapu

91% match

Loading thumbnail…

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

A D3.js animation demonstrates fundamental DOM manipulation by drawing a smiling face whose eyebrows move. The code uses D3 selections to append SVG shapes—a yellow circle, two eye circles, and rectangular eyebrows—onto a 960×500 viewport. Eyebrows animate by chaining `transition().duration(2000)` calls that translate their group element upward and back. A mouth is rendered as an arc path using the `arc()` generator. The example is a fork of a tutorial, built with D3 v5 and SVG rendering.

Yyesheysamdrup

91% match

Loading thumbnail…

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

A smiley face composed of SVG shapes animates its eyebrows in a looping sequence. The code builds the face using D3 selections, appending circles for the head and eyes, rectangles for brows, and a path from `d3.arc` for the mouth. Eyebrow movement is driven by chained `transition().duration(2000)` calls that shift the group’s `transform` attribute between two positions. The example demonstrates fundamental DOM manipulation and animation with D3 v5.

SSai Kaushik

91% match

Loading thumbnail…

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

This fork of “Let's make a face with D3.js!” displays a yellow smiley face with eyes, eyebrows, and a mouth drawn as SVG shapes. The eyebrows animate upward and then back down over four seconds using chained `transition` calls on a group element. The code constructs the face with D3 selections, `arc` for the mouth path, and transitions that modify the `transform` attribute of the eyebrow group.

SSadafNaseem

91% 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

91% match