Let's make a face

100%

Let's make a face

✓ Published0🌍 Public

Last edited Jan 17, 2019

Created on Jan 17, 2019

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.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Let's make a face with D3.js

A cheerful SVG face is drawn using D3.js v5, with a yellow circle for the head, eyes, eyebrows, and a mouth created via the d3.arc path generator. The eyebrows animate upward and downward using chained transition calls with a two-second duration each, shifting their group’s transform attribute. All shapes are appended to a centered g element, with positions set through absolute pixel offsets for facial features.

GGeolffrey S Mena

94% match

Loading thumbnail…

Let us make a face with D3.js

A face built from basic SVG shapes animates into a smile in this D3.js v5 example. Yellow circle head, black eyes, and rectangular eyebrows are drawn via `d3.select` and SVG attributes, then the smile uses the `d3.arc` generator. Transitions on the mouth and one eyebrow change their shape over two seconds, creating a cheerful expression. The other eyebrow remains static, showing asymmetric animation.

Ppadmanabhan-rajendrakumar

94% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face with black eyes, eyebrows, and a mouth is drawn using D3.js v5. The code builds SVG elements directly, positioning a central circle, two eye circles, and eyebrow rectangles with a path for the mouth created via `d3.arc`. The eyebrows animate using chained `transition` calls over two seconds each, moving downward and returning upward. All geometry relies on computed spacing and offset constants, with the SVG centered via a `transform` attribute.

Fffrabal

94% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black-outlined features forms a smiling face. The D3.js code builds the face using SVG primitives: a circle for the head, two circles for eyes, and arcs from `d3.arc()` for eyebrows and a mouth. An animation sequence uses chained `transition()` calls with 1000-millisecond durations to repeatedly raise and lower the eyebrows, creating a winking or surprised expression. The example demonstrates basic SVG drawing and simple timeline-based animation in D3 v5.

Dddperdue

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

94% match

Loading thumbnail…

Let's Make a Face with D3.js

A smiling face is drawn with D3.js v5, featuring circular eyes, rectangular eyebrows, and an arc-shaped mouth on a filled circle head. The eyebrows animate upward and back down using chained `transition().duration()` calls, while all shapes are positioned relative to a centered group. The code uses `d3.select`, `d3.arc`, and SVG elements, rendering with a static yellow head and black outlines.

Tthespiraltree

94% match

Loading thumbnail…

Let's Make a Face with D3.js

A yellow SVG face with a black outline appears, featuring two circular eyes and a smile rendered as an arc path, while its rectangular eyebrows move down and back up in a looping animation. Built with D3 v5, the code uses `select`, `arc`, and chained `transition().duration()` calls on SVG groups to animate the eyebrow transforms, with the face centered via a translated `<g>` element and dimensions read from the SVG attributes.

DDan Henri

94% match