Fork of BA401 EXERCISE$

100%

Fork of BA401 EXERCISE$

✓ Published1🌍 Public

Last edited May 3, 2021

Created on Apr 29, 2021

This example shows an animated, SVG-based face that blinks with a two-second eyebrow bounce. The graphic is built with D3, using `select` to target the SVG and append functions to create grouped elements for the eyes, eyebrows, and mouth. The mouth is a D3 `arc()` path, and the animation is driven by chained `transition().duration()` calls that move the eyebrows up and down. The static HTML includes a pink circle with green stroke, while D3 adds the yellow face behind it.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of BA401 EXERCISE$

This animated SVG face uses D3.js to construct a yellow circular head with eyes, eyebrows, and a mouth from basic shapes and paths. The eyebrows animate vertically using D3 transitions, moving down 50 pixels and back over two-second intervals. The static SVG markup provides a pink background circle with green stroke and two small circles, while the JavaScript code dynamically builds the facial features using D3's `select`, `append`, and `arc` API.

Iikbb-kbj

92% match

Loading thumbnail…

Fork of Fork of BA401 EXERCISE$

This piece creates an abstract, animated face using SVG and D3.js. Two large circles form the head, with smaller circles as eyes and paths as a mouth, while rectangular eyebrows animate up and down over two seconds. The D3 selection API and chained transition methods control the eyebrow movement on the SVG canvas. The rendering is static SVG with a CSS animation triggered by the transitions, and no external data source is used.

Iikbb-kbj

91% match

Loading thumbnail…

BA401 EXERCISE$

This example shows a simple animated face built with SVG, featuring a yellow circle head, two eyes, and a mouth drawn as an arc. The eyebrows rise and fall repeatedly using D3 transitions. The rendering is done through D3 selections and the `arc` generator from D3, with the SVG elements styled via CSS attributes in the markup. The face is centered by translating a group element based on the SVG’s width and height, and animation is driven by chained `transition().duration()` calls that toggle the eyebrow group’s vertical position.

Iikbb-kbj

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

87% match

Loading thumbnail…

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

Nnsatyaprakash22

87% match

Loading thumbnail…

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

A smiley face with light green circular head, black-outlined eyes, and a double-arc mouth animates its rectangular eyebrows upward and downward in a looping transition. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and `transition` to move SVG elements. Eye and eyebrow spacing are controlled via offset constants, while the mouth is drawn with the `d3.arc` path generator. The animation runs continuously, with each eyebrow movement taking two seconds in each direction.

SSANEEM MOHAMMAD

87% match

Loading thumbnail…

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

A smiling face rendered in SVG features animated eyebrows that rise and fall in a repeating two-second cycle, while the rest of the facial elements remain static. Built with D3 v5, the example uses fundamental selections and DOM manipulation to construct circles, rectangles, and an arc-generated mouth. The code leverages d3.select, d3.arc, and chained transition calls to move the eyebrow group vertically, demonstrating core drawing and animation techniques in a minimal, self-contained visualization.

Bbuzquirk

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

87% match