Skip to main content
SimilarExport ZIP
100%

Lets make a face

✓ Published1🌍 Public
LLM2020
Last edited Sep 3, 2019
Created on Sep 3, 2019

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.

AI-generated description

An example including some commonly used features of SVG.

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
100% 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
100% 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
95% match
Loading thumbnail…

Let'S make a face with D3.js

This example uses D3.js v5 to construct an animated face entirely from SVG primitives. It draws a yellow circle for the head, adds two black eyes and rectangular eyebrows, then creates a mouth using an `arc()` path generator. The eyebrows are animated with a two-second `transition()` that shifts them up and down before returning to their original position. The code relies on D3's `select`, `append`, and attribute methods to build and manipulate the SVG scene.

AArnaud Gbaguidi
94% match
Loading thumbnail…

Lets make a face with D3.js

This example draws a simple cartoon face with a yellow circular head, two eyes, animated eyebrows, and a curved mouth. The face is centered in an SVG canvas, and the eyebrows move up and down repeatedly using chained `transition` calls. The code uses D3 v5 selections to build the shapes, including `arc()` for the mouth path, and relies on SVG primitives like `circle` and `rect` for rendering.

Jjblaskovich
94% 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
94% match
Loading thumbnail…

Let's make a face with D3.js

This example renders a simple, animated face from basic SVG shapes. A yellow circle forms the head, with two dark circles for eyes and rectangular eyebrows that move up and down. The mouth is drawn as an arc using the D3 `arc` function. The animation is created with D3's `.transition()` and `.duration()` methods, which are used to move the right eyebrow. The entire composition is centered and built within a single `<g>` group using D3's `select` and `append` functions.

Jjcksnm
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