Skip to main content
SimilarExport ZIP
100%

Let's make a face

✓ Published4🌍 Public
OOleg
Last edited Oct 28, 2020
Created on Oct 28, 2020

This example uses D3.js (v6) to build a simple yellow face from SVG shapes, including circles for the eyes and an arc path for the mouth. A `transition()` with a two-second duration animates the eyebrows by shifting their vertical position, then returns them to the original offset, creating a repeated bobbing motion. The code defines dimensions and offsets as variables and uses SVG attributes like `cx`, `r`, and `d` with the `arc()` generator.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

Let's make a face

This example builds a smiling face from basic SVG shapes using D3.js v6. A yellow circle forms the head, with two eyes and a mouth drawn as a path using the `arc` generator. The eyebrows, rendered as rectangles, animate upward and back down via chained `transition().duration(500)` calls. The code imports `select` and `arc` from D3, positions elements relative to a centered group, and uses SVG attributes like `cx`, `cy`, and `d` for layout.

Ffigment-tree
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with black strokes serves as a face, featuring two eyes, animated eyebrows that move up and down over two-second transitions, and a mouth drawn as an arc. The example demonstrates D3 v5's selection, transition, and arc generators to construct and animate SVG shapes. Eyebrows transition between vertical offsets using `transition().duration()`, while the mouth uses `d3.arc()` with specified inner and outer radii and angular extents. The SVG canvas is centered via a translation transform, and all elements are positioned relative to that origin.

Xxfqx92
92% match
Loading thumbnail…

Let's make a face!

A yellow circular face with gray outlines animates its facial features using D3 transitions. Two circular eyes remain fixed, while rectangular eyebrows and the mouth’s arc path shift vertically and change radius over timed intervals. Built with d3.js v5, the example uses `select`, `arc`, and chained `transition().duration()` calls to cycle eyebrow positions and mouth size on an SVG canvas.

JJamie919
92% 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
92% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to build a cartoon face using D3.js v6, composed of basic SVG shapes: a yellow circle for the head, two small circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The page centers the face within an SVG, and a transition animates the right eyebrow moving upward over two seconds. The code imports `select` and `arc` from the D3 library, uses `svg.append` to construct elements, and applies a transition with a 2000-millisecond duration. No external data is involved; it is purely a programmatic SVG rendering exercise.

++/+
92% match