Skip to main content
SimilarExport ZIP
100%

Face making

✓ Published0🌍 Public
Sszy1900
Last edited Apr 27, 2020
Created on Apr 27, 2020
Forked from Face making

An animated face made of yellow circle, two eyes, and eyebrows greets viewers. The face is rendered with SVG shapes, centered within the viewport. Using D3 v5, the eyebrows bob up and down via chained `transition().duration(2000)` calls that shift their vertical offset. The mouth is created as a D3 `arc()` path, while the entire composition is built declaratively in React.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face making

A face made of SVG shapes is drawn in the center of a yellow circle, with eyes, eyebrows, and a mouth formed from arcs and rectangles. The eyebrows animate upward and then back down over two seconds using chained D3 transitions. Built with React and D3 v5, the code selects the SVG, appends groups for spatial offsets, and uses D3’s `arc()` generator for the mouth path. The animation is driven by `transition().duration(2000)` on the eyebrow group’s transform attribute.

SSuvrajit karmaker
93% match
Loading thumbnail…

Face with D3.js!

A yellow circle face renders in SVG with two eyes, animated eyebrows, and a black arc-based mouth. The face is centered using fixed pixel coordinates in a 960-by-500 viewport. D3 v5 selections append the shapes, while chained `transition().duration(2000)` calls animate the rectangular eyebrows upward and back down. The mouth path uses `d3.arc()` with an inner and outer radius to create a curved shape. React scaffolds the page, and d3-selected elements respond to the pre-set attributes and timing.

TTienTheBros
92% match
Loading thumbnail…

Face with D3.js!

A yellow circle face renders in SVG with two eyes, animated eyebrows, and a black arc-based mouth. The face is centered using fixed pixel coordinates in a 960-by-500 viewport. D3 v5 selections append the shapes, while chained `transition().duration(2000)` calls animate the rectangular eyebrows upward and back down. The mouth path uses `d3.arc()` with an inner and outer radius to create a curved shape. React scaffolds the page, and d3-selected elements respond to the pre-set attributes and timing.

TTienTheBros
92% match
Loading thumbnail…

Making a Face with D3!

A face composed of yellow circle, eyes, eyebrows, and a mouth is drawn with SVG using D3 v5. The brows animate vertically via chained `transition()` calls, moving down then back up. The code uses D3’s `select`, `arc`, and `attr` for shape creation and positioning, with a React-free setup rendering into a static SVG.

AAnnie Liao
92% match
Loading thumbnail…

Let's make a face!

A yellow circle face is drawn with SVG in D3 v5, featuring two eyes, animated eyebrows, and a smile created with an arc path. The eyebrows transition vertically via chained `transition().duration()` calls, moving down and back up. The face is centered using a translated group element, with circles and rectangles positioned relative to eye spacing and offset constants. The code uses `select`, `arc`, and SVG attributes to construct the static facial features while the eyebrows animate independently.

Aases1996
92% match
Loading thumbnail…

Let's Make a Face

A cartoon face composed of SVG shapes animates its eyebrows up and down. The yellow face, red-outlined circle, and black eyes and mouth are built with D3 selections and the `arc()` generator for the smile. Eyebrow motion uses chained `transition().duration(1000)` calls on a group, moving it vertically. The React starter code wraps a static D3 v5 setup, rendering into a centered SVG group on a 960 by 500 canvas.

Aaurelio-89
92% match
Loading thumbnail…

Lets make a face

A friendly yellow face (rendered with SVG) blinks and raises its eyebrows: its eyes and brows animate through a pair of D3 transitions, while its mouth is drawn using the `d3.arc` shape generator. Created with React and D3 v5, the example uses a simple `transition` chain to shrink and restore the eye circles and shift the eyebrow rectangles. The underlying data is static, with all geometry defined by hardcoded dimensions and positions within a single centered SVG group.

Llukastieber
91% match
Loading thumbnail…

Make a face with the use of D3.js

A yellow SVG face with black-outlined features animates its eyebrows and mouth. D3.js v6 shapes the face using `arc()` for the smile and appended `circle` and `rect` elements for the eyes and brows. Chained `transition()` calls with a two-second duration repeatedly move the eyebrows upward and adjust the mouth’s inner and outer radii, creating a looping expression. The face is centered and scaled using the SVG’s dimensions in a React-based starter.

Ssimon0863
91% match