lets make a face

100%

lets make a face

✓ Published1🌍 Public

Last edited May 18, 2020

Created on May 18, 2020

Forked from Shapes and Colors with SVG and CSS

A yellow circular face with black outlines is drawn using SVG shapes. Two eyes are represented as simple circles, while two rectangular eyebrows are animated with a timed vertical bounce using chained `.transition().duration()` calls, moving downward then returning. A mouth is formed using an `arc()` path with specified inner and outer radii and angled start/end points. The example demonstrates basic SVG composition and animation within a D3 v5 context, using the `select`, `append`, and `attr` APIs.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

let's make a face

A yellow circle with a black outline serves as a face, featuring two black eyes and a curved mouth created with the `arc` generator. The left eye animates horizontally via chained `transition().duration()` calls, shifting 50 pixels to the right and back over two seconds, while the right eye and mouth remain static. Using D3 v5 selections, the SVG elements are appended inside a centered group and the animation relies on D3’s built-in transition system. The face is rendered entirely with SVG shapes on a 500×500 canvas.

AAloha1403

93% 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

93% match

Loading thumbnail…

Lets make a face

LLM2020

93% match

Loading thumbnail…

Lets make a face

LLM2020

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

Loading thumbnail…

Let's Make a Face with D3.js

A yellow SVG face with a black outline appears, featuring two circular eyes and a smile rendered as an arc path, while its rectangular eyebrows move down and back up in a looping animation. Built with D3 v5, the code uses `select`, `arc`, and chained `transition().duration()` calls on SVG groups to animate the eyebrow transforms, with the face centered via a translated `<g>` element and dimensions read from the SVG attributes.

DDan Henri

92% 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

92% match