Skip to main content
SimilarExport ZIP
100%

make a face

✓ Published2🌍 Public
Zzhangfa
Last edited Jul 31, 2020
Created on Jul 28, 2020
Forked from HTML Starter

A yellow circle forms a cartoon face with two eyes and a mouth, while the eyebrows animate upward and downward. The example uses D3.js to construct the SVG scene, including a mouth path built with the `arc` function. The animation relies on chained `transition().duration()` calls to move the eyebrow group between two translate positions. The code operates entirely within an SVG canvas and does not reference any external dataset.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Make a face

A yellow circle with red eyes, green eyebrows, and a green mouth forms a simple face in the center of an SVG canvas. The eyebrows animate upward and back down in a repeated motion using D3 transitions. The code builds the face with SVG shapes—circle, rect, and path elements—and uses the d3.arc generator to create the mouth’s curved path. All geometry is defined relative to a centered group, and the transition chain moves the eyebrow group vertically.

KKarin Meersman
94% match
Loading thumbnail…

making a face

A yellow circle with black features forms a simple face, with two eyes and a mouth drawn using an SVG path. The eyebrows are animated rectangles that move down and back up over four seconds. The visualization uses D3 v6 selections to append SVG shapes and the `arc` generator from D3 to create the mouth path. The `transition` method handles the eyebrow animation, while the SVG coordinate system positions features around a central group.

Jjwu534@gmail.com
93% match
Loading thumbnail…

make a face

This example builds a simple yellow face from SVG primitives: a circle for the head, black circles for eyes, an arc path for the mouth, and rectangles for eyebrows. The left eyebrow animates upward and back down using chained `transition().duration()` calls on its `y` attribute. Code uses D3 v5’s `select`, `arc`, and `attr` methods to position elements within a 960×500 SVG. The animation runs once on load, with no data source.

Vvizhubine
92% match
Loading thumbnail…

Making a face

A yellow circle face with two eyes and eyebrows is rendered in SVG, with the right eyebrow animating upward and downward over two seconds. The mouth is drawn as a half-circle arc using the `d3.arc` helper. Built with D3 v5, the code uses `select`, `attr`, and chained `transition` calls to control the animation, positioning elements via SVG transforms.

Rrcumani
92% match
Loading thumbnail…

Making a face

A yellow circle with eyes, eyebrows, and a mouth forms a face using D3 v5 selections and SVG shapes. The right eyebrow animates upward and back down via chained `transition().attr()` calls over two seconds each, while the mouth is drawn with `d3.arc()`. All elements are positioned relative to a centered group, with eyes offset by fixed pixel distances, creating a simple, animated cartoon face.

Ttlrdevere
92% match
Loading thumbnail…

Let's make a face

A yellow circle with black outlines forms a simple face, complete with eyes, eyebrows, and a mouth. The eyebrows animate by moving up and down repeatedly over two-second transitions. Built with D3 v5, the example uses `d3.select`, `d3.arc` for the mouth path, and SVG elements like circles and rectangles. The rendering is SVG-based with animation handled through chained `transition().duration()` calls.

SSun-XH
92% match
Loading thumbnail…

Let's make a face with d3.js

A yellow circle with a black outline forms a face, featuring two eyes and a mouth, while the eyebrows animate by shifting downward and then returning upward over four seconds. The example builds an SVG scene using d3.select and d3.append to structure the face from primitive shapes, including d3.arc for the mouth's curved path. The animation relies on chained d3.transition calls with a two-second duration, altering the eyebrow group's transform attribute to create the repeated motion.

ZZ-Richard
92% 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
91% match