Skip to main content
SimilarExport ZIP
100%

Image Test

✓ Published1🌍 Public
DDanteStack
Last edited Sep 27, 2019
Created on Sep 27, 2019

This example draws a yellow face with eyes, eyebrows, and an arc-shaped mouth in an SVG canvas. The eyebrows animate by transitioning their vertical position in a repeating two-second cycle using D3 transitions. The code builds the face with D3 selections, arc generators, and SVG elements such as circles, rects, and paths, all positioned relative to the center of the 960x500 viewport.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Image Test

A smiling yellow face with black eyes, eyebrows, and a mouth is drawn in the center of an SVG canvas using D3 v5. The eyes are circles, the eyebrows are rectangles, and the mouth is an arc path created with the `arc` generator. The eyebrows animate vertically via chained `transition.attr` calls, moving downward and then returning to their original position over two seconds each way. The svg is selected and manipulated directly with D3 selections, and the face is centered using a translated group element.

Aanvesh12
93% 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
89% match
Loading thumbnail…

Testing

A yellow circle with two eyes and a mouth is drawn in SVG, its eyebrows bobbing up and down in an animated loop. The code builds the face from basic shapes using D3 v5, applying chained `transition` calls to animate the eyebrow group's vertical transform. Rendering is done entirely in SVG, with the mouth formed by D3's `arc` shape generator.

PPedro Ernesto Tramontina
87% match
Loading thumbnail…

Face With D3.js

A yellow face with black eyes and eyebrows is drawn in the center of a red SVG canvas. The code uses D3 v5 to create and style the shape, then animates the eyebrows upward and back down with `transition().duration()`. The mouth is drawn using the `d3.arc()` generator. The example demonstrates basic SVG rendering with D3 selections and transitions, without loading external data.

Wwusushi
87% match
Loading thumbnail…

Let's make a face

This example draws a simple yellow face in an SVG canvas, with two eyes, animated eyebrows that bounce up and down, and a mouth created using an arc path. The face is centered on a 960 by 500 pixel SVG, and the animation is driven by chained `transition` calls that move the eyebrow group vertically. The code uses D3 v5 selections and the `d3.arc` API to construct the mouth shape, with hardcoded pixel values for facial features.

CChristoph Diefenthal
87% match
Loading thumbnail…

D3 Face

A cheerful yellow face with black outlined features fills the SVG canvas. The composition centers a circle for the head, two dark eyes, and a curved mouth drawn with D3's `arc` generator. Animated eyebrows, rendered as rectangles, move up and down in a looping sequence using D3's `.transition().duration()` API. The example demonstrates basic shape construction and animation sequencing within a 960 by 500 pixel viewport, with all elements grouped and positioned using SVG transforms.

Ooliviawxye
86% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlines displays two eyes, eyebrows, and an arc-shaped mouth on an SVG canvas. The eyebrows animate vertically, moving down and back up over a sequence of transitions. Built with D3 v5, the visualization uses `select` and `arc` from the D3 module to construct the facial features, with `transition` and `duration` controlling the eyebrow movement. The code generates the mouth using an arc generator with specified inner and outer radii and angles.

BbeauMarko
86% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth forms a cartoon face in an SVG canvas. The eyebrows move up and down repeatedly via chained `transition().duration()` calls. Built with D3 v5, the example uses `select`, `append`, and `arc()` to construct the face, positioning elements with SVG transforms and hard-coded dimensions.

Jjesramyep1263
86% match