Skip to main content
SimilarExport ZIP
100%

testefaenskap

✓ Published2🌍 Public
Ssh1shk1n
Last edited Aug 24, 2021
Created on Aug 20, 2021

This example shows a cheerful yellow face rendered as SVG, with eyes, moving eyebrows, and a smile. The eyebrows animate upward and downward in a looping transition. The visualization uses D3 v7’s `select`, `arc`, and `transition` APIs to build the facial features and drive the motion. All elements are drawn as SVG shapes, including circles for the face and eyes, rectangles for the eyebrows, and an arc path for the mouth. The animation runs automatically on page load within a fixed 960×500 viewport.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows moving up and down in a looping animation. The face is built entirely through D3.js v5 selections, using `append` to create circle, rectangle, and path elements, and `arc()` to generate the mouth shape. Eye spacing, eyebrow dimensions, and positions are defined as constants, while the eyebrow motion is driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. The code runs in a standalone HTML page with a 960x500 SVG canvas.

SShengjie-Sun
88% match
Loading thumbnail…

D3 test

This example shows a simple yellow face built from SVG shapes, with eyes that blink through a repeating eyebrow animation and a smiling arc-shaped mouth. The code uses D3 v6 selections to append circles, rectangles, and a path to an SVG canvas, while the mouth is drawn with the `d3.arc` helper. A two-stage `transition` chain animates the eyebrows downward and back, demonstrating chained timing. The face is centered using an SVG transform, and static styling comes from the included stylesheet.

Vvmoharir
88% match
Loading thumbnail…

This is a test page.

A smiling face is drawn with D3.js and its eyebrows animate up and down. The face is built by appending SVG shapes—a yellow circle, two eye circles, rectangular eyebrows, and an arc-based mouth—to a central group. The eyebrows move via chained `transition().duration()` calls that toggle their vertical position. The code uses D3 v5 and imports `select` and `arc` from the `d3` module, with the entire animation rendered directly in SVG.

BBrian Merchant
88% match
Loading thumbnail…

test

This animation shows a yellow smiley face with black eyes and eyebrows that raise and lower repetitively over time. The face is drawn using SVG shapes, with a large circle for the head, smaller circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows animate via chained `transition()` calls that shift their vertical position over two-second intervals. The code imports `select` and `arc` from the D3 v6 library and uses `transition.attr` to create the movement.

CChaeHyun-Kim
88% match
Loading thumbnail…

Let's make a face with D3.js!

This example displays a yellow, cartoon-like face drawn with SVG primitives, including eyes, eyebrows, and a mouth. The face’s eyebrows perform a continuous up-and-down animation using D3’s `transition` API, creating a simple, expressive motion. The code uses D3 v7’s `select`, `append`, and `arc` functions to construct the shapes, with a 960×500 SVG canvas. The mouth is generated via the `arc()` path geometry, while the eyebrows shift vertically over two-second intervals, showcasing basic SVG rendering and animation in D3.

Xxychen0612.cs09@nycu.edu.tw
88% 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 animate the face

A yellow smiley face is drawn as an SVG circle with eyes, eyebrows, and a mouth, all positioned using D3.js selections and attribute helpers. The eyebrows and mouth animate via chained `transition.attr` calls, moving vertically and scaling over two-second intervals, demonstrating fundamental DOM manipulation with `d3.select`, `d3.arc`, and transition methods. The example uses D3 v5 and renders entirely in SVG.

TT E Simon
87% match