Let's Make a Face

100%

Let's Make a Face

✓ Published2🌍 Public

Last edited Jan 25, 2021

Created on Nov 6, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face!

A cheerful cartoon face is drawn on a yellow circle with black-outlined eyes, animated eyebrows, and a mouth created using D3’s `arc` generator. The eyebrows transition vertically via `transition.attr` over two seconds, moving up and then returning. The SVG is centered using a `g` transform, and all shapes—circles, rectangles, and a path—are appended with D3 v5, with styling handled by an external CSS file.

Hhamza.miftah@gmail.com

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…

Let's make a face

A cheerful, schematic face is built from SVG primitives in a 960×500 viewport, centered via a translated group. Its yellow head, black-outlined circle, two dark eyes, and a wide mouth arc are composed with D3’s `select`, `append`, and `arc` APIs. The eyebrows, drawn as rectangles, animate upward and back down over two seconds using chained `transition().duration(2000)` calls on the group’s `transform` attribute, while the rest remains static.

Sscarlet shao

93% match

Loading thumbnail…

Let's Make a Face!

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.

Ootes10

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…

Let's Make a Face

A yellow circle face with black eyes and animated eyebrows is drawn using SVG. The eyebrows move up and down through chained transitions that alternate their vertical offset. D3 v6's `select`, `arc`, and `transition` APIs construct the face, with the mouth rendered as an arc path and eye positions set via fixed coordinates.

BbeauMarko

92% match

Loading thumbnail…

Let's Make a Face

A stylized face, composed of geometric shapes in SVG, is drawn on a bright yellow circular background. The face features two circular eyes and rectangular eyebrows, which shift upward and downward in a looping animation using D3 transitions. A smiling mouth is rendered as a partial arc using the `d3.arc` API to generate the path data. The D3 code builds the entire composition programmatically, positioning elements relative to the canvas center and animating the eyebrow group’s transform attribute over time.

Aaurelio-david

92% match