tweak a face eyebrow lift

100%

tweak a face eyebrow lift

✓ Published0🌍 Public

Last edited Jun 2, 2022

Created on Jun 2, 2022

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

A stylized face rendered with SVG shapes animates its eyebrows in a looping lift. The code uses D3 v5 selections and transitions to move a group containing two rectangular brows upward by 50 pixels over two seconds, then back down. The face itself is built from a yellow circle, two eye circles, and a mouth drawn with the D3 `arc` generator, all positioned within a centered group in a 960x500 SVG.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

85% match

Loading thumbnail…

Lets make a face!

A smiling face made of SVG shapes animates its eyebrows upward and downward in a loop. The yellow circular head, two eyes, and arc-shaped mouth are drawn with D3 selections and an `arc()` path generator. Eyebrow motion uses chained `transition().duration(2000)` calls to shift the group’s `transform` attribute. The example runs in React, rendering static SVG elements with D3 v5.

PPrayagvin

84% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a friendly yellow face built entirely with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. The face is constructed using D3.js v5 selections to append a circle for the head, additional circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The code uses `transition()` with a 2000-millisecond duration to animate the eyebrow group’s `transform` attribute. All elements are centered within an SVG canvas using a translation transform, and the styling is handled by an external stylesheet.

Ddacoylo

84% match

Loading thumbnail…

Lets make a face!!!!!

A yellow circular face with black eyes, eyebrows, and an arc-shaped mouth is drawn in the center of an SVG canvas. The eyebrows animate vertically, moving up and down repeatedly using D3 transitions with a 1000-millisecond duration. The face is assembled from SVG primitives including `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` function. The code uses d3-selection to append elements and d3-transition to animate the eyebrow group's transform attribute.

JJoshuaBruens

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

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

84% match

Loading thumbnail…

Let's make a face with D3.js!

This example displays a yellow, cartoon-style face built with SVG shapes, including two eyes, rectangular eyebrows, and a smiling mouth. The eyebrows continuously move upward and downward through a two-stage chained animation cycle. The face is constructed in D3 v5 using `d3.select` and `d3.arc`, with shape attributes set directly. A React starter is available, but the primary implementation uses plain D3 with SVG transitions to animate the eyebrow group’s translate transform.

CCyc-Evelyn

84% match

Loading thumbnail…

Let's make a face

A yellow circle face with black eyes and rectangular eyebrows appears on an SVG canvas. The code uses D3 v5 selections, the `arc()` generator for the mouth, and chained `transition().duration()` calls to animate the eyebrows downward and back. All shapes are positioned relative to a centered group using explicit pixel offsets for eye spacing and eyebrow placement.

Lloicvdk

84% match