Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
DDevWorksSimone
Last edited Mar 1, 2020
Created on Feb 25, 2020

An animated SVG face draws attention with a yellow circular head, dark outline, and two eyes. Using D3.js v5, the code constructs the face from basic shapes—circles for the head and eyes, rectangles for eyebrows, and an arc path for the mouth—all contained within a group. The animation sequences alternate eyebrow raises and eye blinks over a few seconds. The example demonstrates D3's selection and arc APIs, along with chained transition methods to create a playful, looping facial expression.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face is built from SVG shapes, with two eyes, animated eyebrows, and a semi-circular mouth, all centered on a blank canvas. The code constructs the face using D3.js version 5 selection and arc methods, positioning elements via translations and attributes. Eyebrows transition between two vertical offsets over two seconds each, creating a repeated raising-and-lowering motion. The visualization demonstrates basic SVG drawing and transition animations without external data.

Ppcbt1125
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black outlines is drawn using D3.js, featuring circular eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate vertically via chained `transition` calls, moving down and back over two seconds each. Using D3 v7, the code selects the SVG, creates a centered group, and builds shapes with `circle`, `rect`, and the `arc` generator for the mouth. The face's proportions are driven by constants like `eyeSpacing` and `eyeRadius`, with no external data source.

Aash301
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black-outlined features forms a smiling face. The D3.js code builds the face using SVG primitives: a circle for the head, two circles for eyes, and arcs from `d3.arc()` for eyebrows and a mouth. An animation sequence uses chained `transition()` calls with 1000-millisecond durations to repeatedly raise and lower the eyebrows, creating a winking or surprised expression. The example demonstrates basic SVG drawing and simple timeline-based animation in D3 v5.

Dddperdue
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a simple animated face. The SVG rendering starts with a yellow circular face, then adds eyes, eyebrows, and a mouth using an arc path. The eyebrows move up and down through chained transitions, creating a subtle animated expression. The code demonstrates the use of `select`, `append`, `attr`, and `arc` APIs within an SVG container, showing how basic geometric shapes can be assembled into a recognizable character.

Xxfqx92
95% match
Loading thumbnail…

Let's make a face with D3.js

A yellow SVG face with black-outlined features animates its eyes and eyebrows in a looping sequence. The face is built using D3.js v5, with circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth. Transitions scale both eyes and shift the eyebrows vertically over two-second intervals, creating a playful blinking and raising motion. The SVG is centered within a 960×500 viewport, rendered entirely with D3 selection and transition methods.

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

Let's make a face with D3.js

A yellow circle face with black-outlined eyes and eyebrows is drawn using D3.js v5, with the facial features positioned via SVG transforms. The code builds the face programmatically using `d3.select` and `d3.arc` for the mouth, then animates the eyebrows with chained `transition.attr` calls over two seconds each, moving them downward and back upward. The rendering uses SVG elements inside a centered `<g>` group, with dimensions taken directly from the SVG attributes. The example demonstrates basic SVG construction and animation sequencing without external data.

JJasonXQH
95% 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
95% match