Skip to main content
SimilarExport ZIP
100%

Let's make a face

✓ Published3🌍 Public
CChristoph Diefenthal
Last edited Mar 4, 2020
Created on Mar 4, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face

This example draws a simple face in D3, rendered with SVG and animation. A yellow circle forms the head, with rectangular eyes, a nose, and a curved mouth. The eyebrows animate by moving up and down repeatedly using chained `transition` calls. The code uses D3’s `select`, `arc`, and `transition` APIs within a static SVG canvas.

LLM2020
94% match
Loading thumbnail…

Lets make a face

This example draws a simple face in D3, rendered with SVG and animation. A yellow circle forms the head, with rectangular eyes, a nose, and a curved mouth. The eyebrows animate by moving up and down repeatedly using chained `transition` calls. The code uses D3’s `select`, `arc`, and `transition` APIs within a static SVG canvas.

LLM2020
94% match
Loading thumbnail…

Lets make a face

This example draws a simple face in D3, rendered with SVG and animation. A yellow circle forms the head, with rectangular eyes, a nose, and a curved mouth. The eyebrows animate by moving up and down repeatedly using chained `transition` calls. The code uses D3’s `select`, `arc`, and `transition` APIs within a static SVG canvas.

LLM2020
94% match
Loading thumbnail…

Let'smakeaface

This example draws a simple, animated face using D3.js v5. A yellow circle serves as the head, with eyes, eyebrows, and a mouth composed of SVG shapes. The code uses `d3.select` and `d3.arc` to construct the facial features, and it animates the eyebrows by chaining `transition().duration()` calls to move the eyebrow group vertically. The face is centered using SVG attribute retrieval and a `transform` translation.

OOhayouKaminari
94% match
Loading thumbnail…

Let's make a face!

This example uses D3.js to construct a cartoon face from basic SVG shapes. A yellow circle serves as the head, with two eyes and eyebrows positioned symmetrically, and an arc-based path creates a smile. The animation, driven by D3's `.transition()` API, makes the eyebrows move up and down in a looping motion. The SVG is rendered at 960 by 500 pixels, with the face assembled by translating groups to center the features.

GGiant316
94% match
Loading thumbnail…

Let's make a face

Using D3 v5, a yellow SVG face with circular eyes and rectangular brows renders in the center of the viewport. The code draws the face via `d3.arc` for a smiling mouth and uses `transition()` to animate the eyebrows up and down over two-second intervals. The face’s features are positioned using SVG transforms, and the animation loops twice to lift and lower the brows. Simple shape primitives like `circle`, `rect`, and `path` form the complete facial expression.

Mmatt-hooper
93% match
Loading thumbnail…

Let's make a face!

A yellow circle face is drawn with SVG in D3 v5, featuring two eyes, animated eyebrows, and a smile created with an arc path. The eyebrows transition vertically via chained `transition().duration()` calls, moving down and back up. The face is centered using a translated group element, with circles and rectangles positioned relative to eye spacing and offset constants. The code uses `select`, `arc`, and SVG attributes to construct the static facial features while the eyebrows animate independently.

Aases1996
93% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black eyes and animated eyebrows is drawn using SVG. The eyebrows move up and down through chained transitions that alternate their vertical offset. D3 v6's `select`, `arc`, and `transition` APIs construct the face, with the mouth rendered as an arc path and eye positions set via fixed coordinates.

BbeauMarko
93% match