Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published0🌍 Public
Ssgzzhinde
Last edited Dec 18, 2020
Created on Dec 18, 2020

A smiling face drawn with SVG elements animates its eyebrows and mouth via D3 transitions. The example builds the face from primitive shapes—a yellow circle for the head, circles for eyes, rectangles for brows, and an arc path for the mouth—all positioned within a centered group. Using d3.select and d3.arc, it applies chained transition.attr methods over three-second durations to shift the brows upward and slide the mouth sideways, while static hair paths use CSS stroke styling.

AI-generated description

Shapes with SVG and CSS

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

A smiling face drawn with SVG elements animates its eyebrows and mouth via D3 transitions. The example builds the face from primitive shapes—a yellow circle for the head, circles for eyes, rectangles for brows, and an arc path for the mouth—all positioned within a centered group. Using d3.select and d3.arc, it applies chained transition.attr methods over three-second durations to shift the brows upward and slide the mouth sideways, while static hair paths use CSS stroke styling.

Ssgzzhinde
100% 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
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face composed of SVG shapes animates on a yellow circular head, with eyebrows that raise and lower repeatedly. The example demonstrates D3.js v5 selections and transitions, using `append`, `attr`, and chained `transition().duration()` calls to animate rectangles. It builds the face with primitive shapes: a circle for the head, ellipses for eyes, a path generated by the `d3.arc` function for the mouth, and animated rects for eyebrows.

Hhritiksingh580
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes responds to a looping animated transition: the eyebrows move upward, hold, then return. The example demonstrates fundamental D3.js DOM manipulation, building the face from a yellow circle, two dark eyes, rectangular eyebrows, and a smile-shaped path generated with the `d3.arc()` function. D3.js v5 selects the SVG element, appends groups for coordinated positioning, and uses `transition().duration(2000)` to animate the eyebrow group's vertical offset. All elements are styled directly via attributes like `fill` and `stroke` within an 960×500 SVG canvas.

MMark Moesch
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn entirely with SVG shapes—a yellow circle for the head, two dark circles for eyes, a dark arc for the mouth, and two animated eyebrow rectangles. The example demonstrates basic D3.js shape generation and animation, using `d3.arc` to create the mouth path and chained `transition` calls to move the eyebrows up and down over repeated two-second cycles. It also shows how to position groups with `translate` transforms and select elements with D3's selection API.

KKaleb LaBarrie
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes demonstrates fundamental D3.js DOM manipulation. The code selects an SVG element and appends yellow circles for the head and eyes, black rectangles for eyebrows, and an arc-based path for the mouth. Using `d3.transition` with a two-second duration, the eyebrows animate upward and then back down, creating an expressive movement. The example uses D3 v5's `select`, `append`, and `attr` methods to build and update elements, with the mouth drawn via `d3.arc`.

KKhalid
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG demonstrates basic D3.js DOM manipulation and animation. Drawn with a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, the face animates by moving the eyebrows upward and back down using chained `transition().duration()` calls. The example uses D3 v5’s `select`, `arc`, and `attr` methods to construct and style elements, with the eyebrow displacement triggered automatically on load.

RRoyCsuka
95% match