Make a face!

100%

✓ Published1🌍 Public

Last edited Jul 10, 2019

Created on Jul 10, 2019

A smiling face made of SVG shapes uses D3 v5 to animate its eyebrows in a looping motion. The yellow circle head, black-outlined eyes, and arc-based mouth are drawn with D3 selections and the `d3.arc` path generator. Eyebrow rectangles transition vertically via chained `transition().duration()` calls, moving up and down repeatedly. The static SVG is centered using a group transform, and the animation runs automatically on page load.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a face!

A smiling face made of yellow SVG shapes animates as its eyebrows repeatedly lift and lower. The visualization uses D3 v5 selections and transitions to move the eyebrow rectangles along the y-axis over two one-second intervals. The face is constructed with D3's `arc` generator for the mouth and appended circle and rect elements for the eyes and brows, all centered within an SVG canvas.

HHanyang

95% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of yellow SVG shapes animates its eyebrows upward and downward in a loop. Built with D3 v5, the example uses basic selections to append and style a circle, two eye circles, rectangular eyebrows, and an arc-shaped mouth. The `arc` generator creates the mouth path, while chained `transition().duration()` calls animate the eyebrow group’s translate transform over two seconds each way. The SVG is centered via a translated group based on the viewport dimensions.

Bbluesibra

94% 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 smiling face built from SVG shapes animates its eyebrows up and down in a looping transition. The example constructs the face from basic geometric elements—a yellow circle for the head, two small circles for eyes, rectangles for brows, and an arc path for the mouth—centered via a translated group. Using D3 v5, the code applies chained `transition()` and `.attr()` calls to move the eyebrow group repeatedly, while the `d3.arc()` helper generates the mouth’s curved outline. The rendering relies on SVG appended directly to the page’s `<svg>` element.

Mmaber77

93% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes animates its eyebrows up and down in a looping cycle. The code uses D3.js selection, appending, and attribute manipulation to build a yellow circle head, two black eyes, rectangular brows, and an arc-shaped mouth from D3’s `arc` function. A chain of `transition` calls with two-second durations moves the eyebrow group up and down repeatedly, demonstrating fundamental DOM manipulation and view transitions within an SVG canvas.

Mmishaldholakia

93% match

Loading thumbnail…

Make a face with D3.js

A smiling face made of SVG shapes is drawn with D3.js v5. The face uses a yellow circle, black-outlined eyes, rectangular eyebrows, and an arc-based mouth. A chained `transition` repeatedly raises and lowers the eyebrows over two-second intervals. The code imports `select` and `arc` from the D3 library, positions elements with SVG attributes, and animates the eyebrow group via `transition.attr`. The example demonstrates basic SVG composition and D3 transitions on a 960×500 canvas.

TTapiwa Lason

93% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from D3.js SVG shapes animates its eyebrows upward and back down. The code uses `d3.select` to append circles, rects, and an `arc()`-generated path onto a 960×500 SVG, with a yellow circular head, black-outlined eyes, and a curved mouth. Eyebrow motion is driven by chained `transition().duration(2000)` calls that translate the eyebrow group, demonstrating sequential SVG attribute tweening.

Ddev-ignacio-h

93% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes animates its eyebrows in a looping motion. The example builds the face by centering a yellow circle, adding two eyes, and drawing a mouth using the `arc` generator from D3.js v5. Eyebrow rectangles are grouped and moved using `transition` and `attr` with a 2-second duration, shifting vertically up and down. The code imports `select` and `arc` directly from the `d3` module, sets attributes like `r`, `cx`, and `x` for positioning, and uses a 960×500 SVG canvas with a transform to center the composition.

DD2552

93% match