Let's Make a Face

100%

Let's Make a Face

✓ Published4🌍 Public

Last edited Nov 4, 2018

Created on Oct 31, 2018

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.

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

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

95% match

Loading thumbnail…

Let's make a face

A yellow circle becomes a smiley face as the animation runs. D3 v5 builds the face from SVG shapes—a circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc path for the mouth—centered within an SVG canvas. The left eyebrow briefly moves upward via chained `transition` calls, while all other elements remain static. The code uses d3-selection, d3-arc, and SVG attributes, with no external data source.

Jjf1978

94% match

Loading thumbnail…

Let's Make a face with D3 !

This example animates a simple smiling face built entirely with D3 shapes. The face consists of a yellow circle, two black eyes, and a curved mouth created using the `d3.arc` path generator. Eyebrows animate with two sequential `transition().duration()` calls, first moving upward and then rotating via `attr('transform', rotate())`, while the face is centered using SVG group transformations. The code uses D3 v5 selections and transitions on SVG elements, with all coordinates computed from the SVG’s height and width attributes.

CCao,Zhuo

93% match

Loading thumbnail…

Let's make a face

A yellow circle with black outlines forms a simple face, complete with eyes, eyebrows, and a mouth. The eyebrows animate by moving up and down repeatedly over two-second transitions. Built with D3 v5, the example uses `d3.select`, `d3.arc` for the mouth path, and SVG elements like circles and rectangles. The rendering is SVG-based with animation handled through chained `transition().duration()` calls.

SSun-XH

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

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!

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