Let's Make a Face!

100%

Let's Make a Face!

✓ Published1🌍 Public

Last edited Jan 1, 2021

Created on Jan 1, 2021

A smiling face, built from basic SVG shapes, animates its eyebrows upward and downward in a repeating loop. The face is centered within an SVG canvas, with a yellow circle for the head, black-outlined circles for eyes, rectangles for eyebrows, and a curved arc for the mouth. The example uses D3 v6 to construct the scene, and applies a `transition().duration(2000)` to the eyebrow group, shifting its vertical transform to create the animation.

AI-generated description

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Let's Make a Face

A smiling face drawn with SVG shapes animates its eyebrows upward in a repeating loop. The example uses D3 v5 selections to append a yellow circle for the head, two dark circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrow group transitions vertically via `transition.attr` with a duration of 1000 milliseconds, creating a subtle bouncing effect. All elements are centered using a translated SVG group, with hardcoded pixel values for spacing and geometry.

Aaurelio-david

95% match

Loading thumbnail…

Let's Make a Face

A cheerful cartoon face constructed from basic SVG shapes—a yellow circle, black eyes, and rectangular eyebrows—renders on a neutral background. An eyebrow group animates upward and back down using chained `transition` calls with `duration(2000)`, creating a playful expression. The face’s components are positioned via `d3.arc` for the mouth, while circles and rects are placed with explicit `cx`, `cy`, and `x` attributes. D3 v6 selections and attribute manipulation drive the scene, with a centered `g` transform aligning all features.

Llarsboergo

93% match

Loading thumbnail…

Let's Make a Face

This example builds a smiling face from basic SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a semi-circular mouth drawn with `d3.arc`. The eyebrows animate upward and back down using chained `transition().duration()` calls on a `<g>` element. The code uses D3 v5 selection methods and `d3.arc`, with the face centered via a translation transform. The animation runs once on load, and no data source is involved.

PPabloReyesBetanzo

93% match

Loading thumbnail…

Let's Make a Face!

This visualization shows a simple, stylized face constructed from basic SVG shapes, including a yellow circle head, black circular eyes, red arc mouth, and rectangular eyebrows. A smooth, repeated animation moves the eyebrows upward and back down over two seconds, creating an expressive effect. Built using D3 v5, the code leverages SVG primitives and D3’s transition API to animate the eyebrow group’s transform property. The face is centered using a translated group, and the mouth is drawn with a d3.arc path generator.

AAndres Bizzarri

93% match

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

93% 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

92% match

Loading thumbnail…

Let's make a face

A smiling cartoon face is drawn using SVG shapes, with two animated eyebrows that bounce upward and downward in a looping motion. The face is composed of a green circular head, two black-outlined eyes, and a mouth created with the `d3.arc` path generator. The animation is implemented using D3 v5 `transition` calls that alter the eyebrow group's vertical transform, while the static shapes are positioned via SVG attributes and D3 selections.

Xxixihaha0707

92% match