Skip to main content
SimilarExport ZIP
100%

Face with Transitions

✓ Published2🌍 Public
Ggabcoderboi
Last edited Dec 15, 2020
Created on Nov 29, 2020
Forked from Hello VizHub

A yellow circle face with black-outlined eyes, animated rectangular eyebrows, and a curved mouth rendered as an SVG path. The eyebrows move vertically through a chain of two-second `transition` calls, shifting down then returning to their original position. Built with React and D3 v6, the visualization uses `select` to manipulate the SVG and `arc` for the mouth shape.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A yellow circle face with black-outlined eyes, animated eyebrow rectangles, and an arc-based mouth is rendered in SVG. The eyebrows slide downward and back upward over two sequential two-second transitions using D3's `transition` method. The visualization is built with React, uses D3 v6 functions `select` and `arc`, and centers all facial features via SVG group transforms.

RReekMajumder
89% 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
89% 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
89% match
Loading thumbnail…

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.

Sszy1900
89% 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
89% match
Loading thumbnail…

Face!!

A yellow circle with black eyes, animated rectangular eyebrows, and an arc-shaped mouth forms a simple face on a gray background. The eyebrows slide upward and then return to their original position using chained D3 transitions with a two-second duration. The visualization is built with D3 v6, using `select`, `attr`, and `transition` methods to manipulate SVG elements, while the mouth is drawn with the `arc` generator.

AAtrayeeDeb
89% match
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
88% match
Loading thumbnail…

Make a face

A stylized yellow face is drawn in SVG, with black-outlined circles for eyes and a curved arc path for a mouth. The eyebrows, rendered as rectangles, animate vertically in a looping up-and-down motion using chained `transition()` calls. Built with React and D3 v5, the code uses `select` to target the SVG and `arc()` to generate the mouth's path, while the face is centered via a group transform.

Jjeelong
88% match