D3 Face twisty eyebrows

100%

D3 Face twisty eyebrows

✓ Published1🌍 Public

Last edited Jun 28, 2021

Created on Jun 28, 2021

Forked from D3 Face

A yellow circle face with black stroke holds two black eyes and a smile-shaped mouth. Its thick black eyebrows rotate inward and outward in a looping animation, tilting up and down around their centers. The piece uses D3.js v7 with SVG elements, applying chained `transition()` calls to animate the `transform` attribute of each eyebrow line over two-second intervals. The mouth is drawn as an arc path using D3's `arc()` generator.

AI-generated description

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

D3

A yellow circle with eyes, eyebrows, and a mouth forms a smiling face, rendered as SVG elements. The right eyebrow animates upward and back down over four seconds using D3 transitions. The face is centered in a 960×500 viewport, with the mouth drawn via the `arc` generator and all shapes grouped and translated using D3's `select` and `append` methods. The animation runs in an infinite loop, triggered by chained `transition().duration()` calls on the eyebrow rectangle.

JJeffrey Miiller

89% match

Loading thumbnail…

D3 Face

A smiling face is drawn as a yellow circle with eyes, eyebrows, and a mouth, and the eyebrows perform a repeated up-and-down animation. The SVG is generated using D3 v5, with circles for the face and eyes, rectangles for the eyebrows, and an `arc` path for the mouth. A D3 transition with a 2000-millisecond duration drives the eyebrow movement, translating the group along the y-axis.

Rrdeichert

89% match

Loading thumbnail…

D3

A smiling face is drawn in yellow with black outlines, featuring two eyes, animated eyebrows that move up and down, and a curved mouth. The animation is built with D3 v5 transitions, where the eyebrow group’s transform attribute is tweened over two seconds to shift vertically, then returns. The SVG is centered using a translated `<g>` element, and the mouth’s arc path is generated with the `d3.arc()` helper, while circles and rectangles define the other facial features.

Aantoinecarto

88% match

Loading thumbnail…

D3 Face

A yellow circle with black outlines forms a face, featuring two eyes, rectangular eyebrows, and a half-circle mouth. The eyebrows animate by moving upward over two seconds and then returning to their original position. The visualization is built with D3 v7, using SVG shapes within a root group, and the mouth is drawn with the `d3.arc` path generator. The animation relies on chained `transition().duration()` calls, offering a simple, playful demonstration of D3's selection and transition methods.

Hhenryspradlin

88% match

Loading thumbnail…

A face with D3.js

A face rendered as vector shapes smiles with a winking animation as one eyebrow rises and falls. Built with D3.js v7, the SVG composition uses circles for the yellow head and eyes, rectangles for eyebrows, and `d3.arc` paths for the mouth and tongue. The right eyebrow animates through chained `transition().duration()` calls, creating a subtle three-second loop.

RRobindj2000

88% match

Loading thumbnail…

D3 Face

A yellow circle with black strokes forms a face, featuring two eyes and eyebrows that animate in a blinking motion, while a mouth is drawn as an arc. The eyes scale vertically to simulate blinking, and the eyebrows shift upward twice before returning. Built with D3 v3, the visualization uses SVG elements and transitions, leveraging `select`, `arc`, and chained `transition` calls to orchestrate the timed animations.

JJonah Meijers

88% match

Loading thumbnail…

Let's make a face with D3

A yellow circle forms a face, with two black eyes and a wide arc-shaped mouth. The eyebrows, rendered as rectangular bars, animate upward and then back down in a looping motion. Built with D3 v6, the visualization uses SVG elements and D3’s `transition()` method to adjust the eyebrow group’s transform attribute over two-second intervals. The face is centered using a translation on a group element, with the mouth created via the `arc()` generator.

Jjkmingwen

88% match