Let's make a face

100%

Let's make a face

✓ Published1🌍 Public

Jjf1978

Last edited Jun 2, 2020

Created on Jun 1, 2020

A yellow circle becomes a smiley face as the animation runs. D3 v5 builds the face from SVG shapes—a circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc path for the mouth—centered within an SVG canvas. The left eyebrow briefly moves upward via chained `transition` calls, while all other elements remain static. The code uses d3-selection, d3-arc, and SVG attributes, with no external data source.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a Face!

A yellow smiley face appears centered on an SVG canvas, built from D3 shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows animate upward and back down repeatedly using D3's `transition()` with a two-second duration. The code uses `d3.select`, `d3.arc`, and attribute setters to construct the static face, while the animation is driven by chained `transition().attr()` calls, rendering in SVG.

OOvxOO

95% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3

94% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black facial features forms a smiley face on an SVG canvas. Two eyes and a mouth are drawn using D3 shapes, while a pair of dark eyebrows animate vertically in a looping transition, moving up and then back down. The face is centered via a group transform, with the mouth created using the d3.arc path generator. The animation uses chained transition calls on an SVG group element to shift the eyebrows repeatedly.

HHasideluxe

94% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face built with SVG uses D3.js v5’s selection methods to append a circle for the head, two circles for eyes, and rectangles for eyebrows, with an arc-generated path forming the mouth. The code demonstrates chained transitions via `transition.attr` to animate the eyebrow group’s vertical position over two 2-second phases, creating a raising and lowering effect. The face is centered using a group transform, with all shapes positioned relative to that origin.

BBendrog

94% match

Loading thumbnail…

Let's Make a Face

A smiling face built from basic SVG shapes appears on a yellow circle, with eyebrows that bob up and down through a looping transition. The example uses d3-selection and d3-shape to construct the face, positioning eyes, eyebrows, and a mouth with coordinate offsets. An arc generator creates the mouth, while chained transition calls animate the eyebrow group’s vertical position over two-second intervals, producing a playful expression. The code renders entirely in SVG within a 960 by 500 viewport.

Rryandebattista

94% match

Loading thumbnail…

Lets make a face

A D3.js animation constructs a smiling face from basic SVG shapes: a yellow circle for the head, two circles for eyes, and an arc path for the mouth. The left eyebrow rectangle performs two sequential transitions, moving upward then returning to its original position. The code uses D3's selection and arc APIs, appending shapes to an SVG canvas with a translated coordinate system.

Ssreen020

94% match

Loading thumbnail…

Let's make a face with D3.js

A yellow smiley face is drawn in SVG, with circles for eyes, rectangles for eyebrows, and a path created using the d3.arc generator for the mouth. The face animates as the eyebrow group performs a transition.attr on its transform, moving up and down over two seconds in each direction. Built with D3 v6, the code uses select to target the SVG element and applies geometric attributes like cx, cy, r, and rotation transforms to compose the facial features.

JJoachim Klug

94% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai

94% match