Make a face

100%

✓ Published0🌍 Public

Last edited Jul 20, 2020

Created on Jul 20, 2020

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face

A stylized face built from SVG shapes appears centered on a yellow circular head, with eyes, animated eyebrows, and a mouth formed by a D3 arc path. The eyebrows repeatedly rise and fall using chained `transition()` calls with a two-second duration each. The implementation uses D3 v6 selections to append and position circles, rectangles, and an arc, with dimensions driven by the SVG height and width attributes. The face is constructed entirely through D3’s `select`, `arc`, and transition methods, rendering in a React environment without external data.

MModalMBS

94% match

Loading thumbnail…

Make a face with D3.js

A yellow face built from SVG primitives sits centered in the canvas, with two circles for eyes, two rectangles as eyebrows, and a path-based mouth using `D3.arc`. The eyebrows animate upward and then back down over two seconds using D3’s `.transition().duration()` API, creating a subtle, repeated motion. The code imports `select` and `arc` from D3 v6 within a React framework, and renders entirely through SVG elements positioned via transforms.

CChinzorigt Ganbat

93% match

Loading thumbnail…

Make a Face with SVG and CSS

This example renders a cartoon face using SVG shapes composed with D3.js v5 selections and the `arc()` generator. A yellow circle forms the head, with circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The eyebrows animate vertically using chained `transition()` calls, while the face is centered via a group transform. The visualization demonstrates static SVG composition and D3 transitions within a React framework.

NNewSage-01

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

93% match

Loading thumbnail…

Let's Make a Face

A yellow circle face with black eyes, animated eyebrows, and a curved mouth is drawn using SVG. The code builds the face by layering a circle, eye groups, and rectangles for eyebrows, then animates the eyebrows upward and back down using chained D3 transitions. The mouth is created with a d3.arc path. The example uses React-compatible starter code and renders entirely with D3 v5's select and arc modules.

Ttim-adam

93% match

Loading thumbnail…

Let's make a face

A cartoon face made of geometric shapes is drawn in an SVG canvas, with a yellow circle for the head, two circles for eyes, and an arc-based path for the mouth. The eyes and eyebrows are grouped and repositioned via chained D3 transitions, causing the eyebrows to animate up and down. The example uses the D3 v5 `select`, `arc`, and `.transition().attr()` APIs within a React framework to demonstrate simple SVG animation and attribute interpolation.

Bbambaleq

92% match

Loading thumbnail…

Let's Make a Face with D3.js

This example builds a stylized face from basic SVG shapes—a yellow circle for the head, two eyes, animated eyebrows, and an arc-based mouth—centered within an SVG canvas. The code uses D3.js v5 selections and the `arc` generator to construct the mouth path, while `transition()` animates the eyebrows in a looping up-and-down motion. React serves as the hosting framework, and rendering relies on SVG elements with D3’s declarative attribute chaining.

Nnkrpyate

92% match

Loading thumbnail…

Lets make a face

A cheerful cartoon face is drawn in SVG, with a yellow circular head, black-outlined eyes and eyebrows, and a curved mouth made from an arc path. The eyes and eyebrows perform a repeating blink animation using chained `transition().duration(500)` calls, shrinking the eye radius and shifting the eyebrow group vertically before returning to their original states. The visualization uses React with D3 v5, specifically the `select` and `arc` utilities, to build and animate the face in a fixed 960×500 SVG canvas.

Llukastieber

92% match