Skip to main content
SimilarExport ZIP
100%

Face with animated eyebrows and mouth

✓ Published2🌍 Public
JJacob van Lingen
Last edited May 15, 2020
Created on May 14, 2020

A face with animated eyebrows and a mouth demonstrates D3.js transitions and SVG rendering. The head and eyes are static shapes, while the eyebrows move vertically using chained `transition` calls in the `animateEyebrows` function. The mouth is a D3 arc path that repeatedly changes its inner radius via `transition.attrTween` and `d3.interpolate`, alternating between open and closed states every 1.5 seconds. The code uses D3 selections and the `arc` generator, with no external data source.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Face with D3

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping transition. The example uses D3 v4 selections to append circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` API for the mouth. All elements are centered within an SVG using a group transform, and the eyebrow motion is driven by chained `transition.attr()` calls on the group’s transform attribute.

Nngannie
90% match
Loading thumbnail…

Face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows and mouth in a looping transition. The code builds the face using D3.js v5 selection and append methods to create circles, rectangles, lines, and an arc-based path, all positioned with hardcoded coordinates. The eyebrows shift upward and the mouth changes thickness through chained `transition().duration(3000)` calls, demonstrating basic DOM manipulation and attribute updating without data binding.

Nnikeshkv
89% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan
88% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan
88% match
Loading thumbnail…

Let's make a face ith D3.js!

This example builds a smiling face out of basic SVG shapes, then animates its eyebrows with a looping transition. D3 v7 selects the SVG and uses the `arc` generator to draw the mouth as a half-ring path, while circles and rectangles form the eyes and brows. The animation runs for two seconds per eyebrow movement, creating a repeated up-and-down motion. The code demonstrates D3 selections, transitions, and the `arc` API, all rendered directly to SVG.

AAuliaAmirullah15
88% match
Loading thumbnail…

face with D3.js eyebrows moving

A yellow D3.js face with black-outlined features animates its eyebrows up and down in a repeating motion. The face, rendered as SVG, uses a circle for the head, two circles for eyes, and a D3 arc path for a mouth. Two rectangular eyebrows move via chained `transition().duration()` calls on an SVG group. The visualization is built with the d3 library (v5), using the SVG rendering and animation capabilities within an HTML page.

YYedrup
88% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from D3.js SVG shapes animates its eyebrows upward and back down. The code uses `d3.select` to append circles, rects, and an `arc()`-generated path onto a 960×500 SVG, with a yellow circular head, black-outlined eyes, and a curved mouth. Eyebrow motion is driven by chained `transition().duration(2000)` calls that translate the eyebrow group, demonstrating sequential SVG attribute tweening.

Ddev-ignacio-h
88% match
Loading thumbnail…

A Face with D3.js!

A smiley face drawn with D3.js features animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation by building the face from SVG primitives: circles for eyes, a rectangle for the nose, a path from `d3.arc` for the mouth, and rectangles for eyebrows. The animation uses chained `transition().duration(2000)` calls to shift the entire eyebrow group's `transform`, showing how D3 manipulates SVG attributes over time. The SVG canvas is set to 960×500 with an orange background.

YYoung Song
88% match