Skip to main content
SimilarExport ZIP
100%

BA401 EXERCISE$

✓ Published1🌍 Public
Iikbb-kbj
Last edited Apr 29, 2021
Created on Apr 29, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

BA 401 EXERCISE

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation using D3.js. The visualization is created with SVG elements, including circles for the face and eyes, rectangles for eyebrows, and a path for the mouth. D3 selections and the `arc` generator construct the face, while chained `transition` calls with `.duration(2000)` animate the eyebrows up and down. The source code is provided as an HTML file with a bundled JavaScript module.

DDebaliena
89% match
Loading thumbnail…

BA 401 EXERCISE

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face, including its red eyes and arc-shaped mouth, is drawn using SVG elements such as `circle` and `path`, with the mouth generated via the `d3.arc` function. Both eyebrows, implemented as `rect` elements, move upward and then return to their original position using chained `transition().duration()` calls over two seconds each. The code uses D3’s `select` API to manipulate the SVG directly, with all coordinates and sizes defined as constants.

DDebaliena
88% match
Loading thumbnail…

Fork of BA401 EXERCISE$

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.

Iikbb-kbj
88% match
Loading thumbnail…

BA 401 Exercise

A smiley face drawn with SVG shapes uses the D3.js `select` and `arc` APIs for its geometry. The eyebrows, rendered as rectangles, animate upward and downward via chained `transition()` calls, while a red mouth path includes an `<animateMotion>` tag. The face is constructed from blue and red circles with a black stroke, and the animation loops indefinitely.

HHCR31
88% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with black strokes serves as a face, featuring two eyes, animated eyebrows that move up and down over two-second transitions, and a mouth drawn as an arc. The example demonstrates D3 v5's selection, transition, and arc generators to construct and animate SVG shapes. Eyebrows transition between vertical offsets using `transition().duration()`, while the mouth uses `d3.arc()` with specified inner and outer radii and angular extents. The SVG canvas is centered via a translation transform, and all elements are positioned relative to that origin.

Xxfqx92
87% match
Loading thumbnail…

SVG Face

A smiling yellow SVG face with animated eyebrows demonstrates basic D3 shape and transition techniques. The face is centered using SVG groups and transforms, with circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` function for the mouth. The eyebrows move upward and return via chained `transition().duration()` calls. The example uses d3-v5 select and arc APIs to build the static face and animate its expressions purely through SVG attribute interpolation.

Rrams211
87% match
Loading thumbnail…

SVG Face

A smiling yellow SVG face with animated eyebrows demonstrates basic D3 shape and transition techniques. The face is centered using SVG groups and transforms, with circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` function for the mouth. The eyebrows move upward and return via chained `transition().duration()` calls. The example uses d3-v5 select and arc APIs to build the static face and animate its expressions purely through SVG attribute interpolation.

Rrams211
87% match
Loading thumbnail…

Let's make face with D3.js!

A yellow circular face with black-outlined eyes, animated eyebrows, and a curved mouth is rendered in SVG using D3.js v5. The example demonstrates how to build a static facial structure with `select`, `append`, and `arc` for the mouth, then animate the rectangular eyebrows via chained `transition().duration()` calls that move them up and down. All shapes are positioned and scaled relative to the SVG’s width and height, with the face group translated to the center. The code uses D3’s selection and arc generators, with transitions running for two seconds per movement phase.

Bbhayyasaheb
87% match