Let's make a face

100%

Let's make a face

✓ Published0🌍 Public

Last edited Mar 4, 2020

Created on Mar 4, 2020

A smiling cartoon face is drawn using SVG shapes, with two animated eyebrows that bounce upward and downward in a looping motion. The face is composed of a green circular head, two black-outlined eyes, and a mouth created with the `d3.arc` path generator. The animation is implemented using D3 v5 `transition` calls that alter the eyebrow group's vertical transform, while the static shapes are positioned via SVG attributes and D3 selections.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face

A smiley face, drawn with SVG circles and an arc path, animates its eyebrows in a looping sequence in a D3.js visualization. The code builds the face by manipulating SVG groups and shapes, using D3's `select` and `append`. A `transition` with a 2000-millisecond duration shifts the eyebrow group up and down, creating the expression change. The face's construction relies on explicit pixel coordinates and D3's `arc` generator for the mouth, with a yellow circle serving as the head.

Mmoha0902

93% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn with D3.js, rendered as SVG shapes. The face uses circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. The eyebrows animate by moving downward and back upward over six seconds using chained `transition` calls with a 3000-millisecond duration. The code constructs the face using `d3.select`, `d3.arc`, and `d3.transition` APIs on the SVG canvas.

BBKirst3

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

93% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce upward and settle back down. The example demonstrates fundamental D3.js DOM manipulation by constructing the face from appended shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. A chained `transition` with a two-second duration moves the eyebrow group twice, creating the animation. The code uses D3 v5 selections and attributes on a static SVG canvas.

Eevesshaw

93% match

Loading thumbnail…

Lets make a face

A smiling cartoon face is drawn with D3.js, composed of a yellow circle for the head, two eyes, eyebrows, and a mouth shaped as an arc. The face is centered on an SVG canvas, with the mouth created using the `d3.arc` function and the layout arranged through nested SVG groups. A simple animation is applied via the D3 `transition` method, which moves the eyebrows down and then back up over two seconds each way, creating a subtle expressive effect. The example demonstrates basic SVG composition and state animation without external data sources.

Uumihito

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 smiling face drawn with SVG shapes animates its eyebrows upward in a repeating loop. The example uses D3 v5 selections to append a yellow circle for the head, two dark circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrow group transitions vertically via `transition.attr` with a duration of 1000 milliseconds, creating a subtle bouncing effect. All elements are centered using a translated SVG group, with hardcoded pixel values for spacing and geometry.

Aaurelio-david

93% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, and its eyebrows animate upward and downward in a loop. The face is constructed using D3.js v5’s `select` and `append` to create circles for eyes, rectangles for eyebrows, and a `path` for the mouth via the `arc` shape generator. The eyebrows’ movement is driven by chained `transition().duration()` calls that alter the group’s `transform` attribute. The code relies on D3’s DOM manipulation and transition APIs, with all rendering occurring in an SVG viewport.

JJuan Carlos

92% match