Skip to main content
SimilarExport ZIP
100%

Face D3

✓ Published1🌍 Public
Ssayleenaik
Last edited Oct 27, 2020
Created on Oct 27, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face with D3.js

This example shows a simple, stylized face built from SVG shapes. A yellow circle forms the head, with red circles for eyes, black rectangles for eyebrows, and a black arc path for the mouth. The code uses the D3.js v5 `select` and `arc` APIs within a React framework, and animates the eyebrows using chained `transition()` calls with a two-second duration to shift them upward and then back down.

Ddivinebooger
93% match
Loading thumbnail…

Face - D3.js

A smiling yellow face is drawn with SVG shapes and animated eyebrows that bounce up and down. The code uses D3.js v6 selections and the `arc` generator to create the mouth, positioning elements relative to the SVG center. A React-ready setup renders via a static HTML page with D3 transitions driving the eyebrow movement over timed intervals.

EEllednera
93% match
Loading thumbnail…

Face with D3.js

A face built with D3.js is rendered as a yellow circle with black outline, featuring two eyes and a curved mouth, all contained in an SVG. The example demonstrates a simple animation where the eyebrows move up and down via a transition loop. The code uses D3's `select`, `append`, and `arc` APIs to construct the facial components, with the mouth created using an arc path with specified radii and angles. The entire composition is centered dynamically in the viewport.

WWayne716
92% 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
92% 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
92% 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
92% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black eyes and expressive eyebrows is drawn using D3.js v5 in an SVG. The code uses `select` to access the pre-defined SVG element, `arc` to generate the mouth path, and chained `transition().duration()` calls to animate the right eyebrow bouncing upward and downward. The face is centered using a translated `g` group, with hardcoded numeric values for spacing, radii, and offsets defining all facial features.

AAtarius Armstrong
92% match
Loading thumbnail…

D3 Face

A cartoon face rendered in SVG uses D3 v5 to build a yellow circle head with black eyes and an arc-based mouth. Eyebrows, drawn as rectangles, animate vertically through chained `transition` calls on a group element. The code leverages D3’s `select` and `arc` APIs, with static attributes for positioning and a repeated eyebrow movement lasting two seconds per phase, demonstrating basic SVG construction and timed animation.

Ttenghaoman
92% match