Skip to main content
SimilarExport ZIP
100%

Let's make a face

✓ Published0🌍 Public
Sscarlet shao
Last edited May 30, 2021
Created on May 30, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

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 using D3.js v6. A yellow circle forms the head, with two eyes and a mouth drawn as a path using the `arc` generator. The eyebrows, rendered as rectangles, animate upward and back down via chained `transition().duration(500)` calls. The code imports `select` and `arc` from D3, positions elements relative to a centered group, and uses SVG attributes like `cx`, `cy`, and `d` for layout.

Ffigment-tree
93% match
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
93% match
Loading thumbnail…

Let's make a face!

A yellow circle face is drawn with SVG in D3 v5, featuring two eyes, animated eyebrows, and a smile created with an arc path. The eyebrows transition vertically via chained `transition().duration()` calls, moving down and back up. The face is centered using a translated group element, with circles and rectangles positioned relative to eye spacing and offset constants. The code uses `select`, `arc`, and SVG attributes to construct the static facial features while the eyebrows animate independently.

Aases1996
93% match
Loading thumbnail…

Let's make a face

Using D3 v5, a yellow SVG face with circular eyes and rectangular brows renders in the center of the viewport. The code draws the face via `d3.arc` for a smiling mouth and uses `transition()` to animate the eyebrows up and down over two-second intervals. The face’s features are positioned using SVG transforms, and the animation loops twice to lift and lower the brows. Simple shape primitives like `circle`, `rect`, and `path` form the complete facial expression.

Mmatt-hooper
93% match
Loading thumbnail…

Let's make a face with D3.js

A cheerful yellow face built with SVG primitives uses D3.js v6 to assemble circles, rectangles, and an arc-based mouth from the `d3.arc` API. The face is centered via an SVG group translation, with eyes and eyebrows positioned using explicit offsets. A `transition().duration(2000)` sequence animates the eyebrow group by shifting its `transform` attribute upward and back, creating a subtle blinking or raising motion. The rendering is entirely SVG-based, with static geometry defined in the initial state.

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