Let's make a face!

100%

Let's make a face!

✓ Published4🌍 Public

Last edited Apr 6, 2020

Created on Apr 6, 2020

This example animates a simple cartoon face built from SVG shapes, with eyes, eyebrows, and a mouth arranged symmetrically. The face is constructed using D3 selections to append a circle for the head, circles for eyes, rectangles for eyebrows, and a path generated by the `arc` function for the mouth. The eyebrows independently animate upward and back down over two seconds using chained `transition` calls with `duration(2000)`. All elements are positioned relative to the viewport’s center via a transform on a group element.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Lets make a face

This example builds a cartoon face from basic SVG shapes—a yellow circle for the head, two black eyes, rectangular eyebrows, and an arc-based mouth. The code uses D3 v5 selections and the `arc()` generator to construct the mouth, while `transition().duration()` animates the eyebrows upward and back down over four seconds. All elements are grouped and centered using SVG transforms, with fixed pixel values controlling feature placement.

AAgitechavids Technologies Private Limited

94% match

Loading thumbnail…

Let's Make a Face with D3.js

This example animates a simple cartoon face built entirely with SVG shapes in D3.js. Shown head-on, the face consists of a circular head, two eyes, rectangular eyebrows, and an arc-based mouth, all centered within an SVG canvas. The eyebrows repeatedly bounce upward and downward using chained `transition` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs, constructing the face by appending circles, rectangles, and paths to a translated group element.

Tthespiraltree

94% match

Loading thumbnail…

Let's make a face

A cartoon face made of geometric shapes is drawn in an SVG canvas, with a yellow circle for the head, two circles for eyes, and an arc-based path for the mouth. The eyes and eyebrows are grouped and repositioned via chained D3 transitions, causing the eyebrows to animate up and down. The example uses the D3 v5 `select`, `arc`, and `.transition().attr()` APIs within a React framework to demonstrate simple SVG animation and attribute interpolation.

Bbambaleq

93% match

Loading thumbnail…

Let's make a face with D3.js

This example builds a simple cartoon face from basic SVG shapes, including circles for the head and eyes, rectangles for eyebrows, and a path for the mouth. The face is grouped and centered within the SVG canvas. The animation is driven by D3 transitions, which sequentially move the eyebrows downward over two-second intervals. The code uses D3 v5's selection, arc, and transition APIs to construct and animate the elements, with the mouth generated using the `d3.arc` geometry generator to create a curved path.

Ssingularity6033

93% match

Loading thumbnail…

Lets Make a Face

This example shows an animated cartoon face built with SVG elements, centered on a 960 by 500 canvas. The face features a large orange circle for the head, two dark eyes, rectangular eyebrows, and a smile-shaped arc for the mouth. A single eyebrow animates by moving downward and back using D3’s `transition().duration()`, while the other elements remain static. The code uses D3 v5’s `select`, `arc`, and chained transitions within a React project, rendering purely through SVG attributes.

Eedpmay

93% match

Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face out of basic SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth—all centered within an SVG canvas using D3.js v5. The code imports `select` and `arc` from the D3 library to append elements and compute the mouth’s path. A chained `transition().duration(2000)` sequence animates the eyebrows up and down, creating a winking expression. The layout uses fixed numeric constants for spacing and offsets, with no external data source.

Rracoo

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and back down over two seconds via chained `transition()` calls. All elements are centered using an SVG `<g>` group with a translation transform, and the code imports `select` and `arc` from D3 to manipulate the DOM and generate the mouth path. The face is static except for the looping eyebrow movement.

IIan Perry

93% match

Loading thumbnail…

Let's make a face with D3.js

This D3.js example builds a cartoon face entirely out of SVG primitives—circles for eyes and the head, rectangles for eyebrows, and an arc path for the mouth. The face is centered in an SVG canvas using a group transform. The code animates the eyebrows with sequential `transition().duration(2000)` calls, moving them upward and back down. It relies on standard D3 v5 methods like `select`, `append`, and `attr`, using the `arc` helper to generate the mouth’s path data within the SVG.

WWhatTheFork85

93% match