face with D3.js eyebrows moving

100%

face with D3.js eyebrows moving

✓ Published4🌍 Public

Last edited Mar 8, 2020

Created on Mar 8, 2020

Forked from Let's make a face with D3.js

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black-outlined features animates its eyebrows in a repeating up-and-down motion. Built with D3 v5, the example composes circles, rectangles, and an arc-generated path for the mouth on a centered group. D3 transitions with specified durations and movement offsets drive the eyebrow animation, while static attributes define eye spacing, radius, and facial proportions.

Eemanuelemurgolo

92% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined features is rendered in SVG, and its eyebrows animate upward and back down over four seconds. Built with D3 v5, the example uses `d3.select` to target the SVG, `d3.arc` to generate the mouth path, and chained `transition().duration()` calls to move the eyebrow group. The face is centered via a translated `g` element, with eye spacing, radius, and eyebrow dimensions defined as constants. No external data is loaded; all shapes are constructed programmatically from hard-coded values.

Ppcbt1125

91% match

Loading thumbnail…

Face with D3.js!

A yellow SVG face uses D3.js to animate its eyebrows downward and back, creating a subtle blinking or surprised effect. The face is composed of circles for the head and eyes, rectangles for the eyebrows, and a path for a smile, all drawn using vector graphics. The animation relies on `transition().duration(2000)` to move the eyebrow group's `transform` attribute between two vertical offsets, providing a simple looping motion within a React-styled D3 v5 environment.

Ssafdarnu

91% match

Loading thumbnail…

Face with D3.js!

Ssafdarnu

91% match

Loading thumbnail…

Face with D3.js!

Ssafdarnu

91% match

Loading thumbnail…

Make a face with D3.JS

A face drawn with D3.js v6 animates its eyebrows up and down. The SVG face shows a yellow circular head, two eyes, rectangular eyebrows, and a curved mouth created with the `d3.arc` generator. The view is centered using an SVG group translation based on the width and height attributes. Eyebrow movement uses chained `transition` calls to shift the group's transform over 2000 milliseconds each way.

TTimothy sit

91% match

Loading thumbnail…

Face D3

A yellow face drawn with D3.js SVG primitives animates its eyebrows in a looping motion. The face, constructed from circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth, is centered in an SVG canvas. The animation uses D3's transition system to move the eyebrow group up and down over two seconds each way. The code imports `select` and `arc` from D3 v5 and runs within a React framework.

Ssayleenaik

90% match

Loading thumbnail…

Let's make a face with D#.js

A yellow circle face with black-outlined features animates its right eyebrow in a quick bouncing motion. The face is built entirely with D3.js v5 selections and SVG shapes, including circles for eyes and an arc-generated path for the mouth. The code uses D3's `arc` generator for the mouth, `transition` with `duration` for the eyebrow animation, and positions elements via template-literal transform attributes. The left eyebrow remains static, highlighting the asymmetry of the moving right eyebrow.

IIgor Oliveira

90% match