Faccia

100%

✓ Published1🌍 Public

Last edited Aug 29, 2020

Created on Aug 29, 2020

A cheerful yellow face with black-outlined features stares straight ahead. The composition centers on a smiling arc mouth, flanked by two eyes and rectangular eyebrows. Both eyebrows perform a synchronized blinking animation, moving upward and then returning to their resting position over two seconds via chained `transition().duration()` calls. The visualization is built with React and rendered as an SVG using D3 v5’s `select`, `append`, and `arc` APIs, with static geometry for the face and its parts.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Faccia

A simple smiley face, rendered in SVG, fills the viewport with a yellow circle. The code builds the face by layering circles for the eyes and an arc-path for the mouth, using D3 v5 selection and arc generators within a React starter. Eyebrows are added as rectangles, with all elements centered via a translated group. This example demonstrates basic D3 shape generation and SVG manipulation.

TTerribleCactus

89% match

Loading thumbnail…

Faccia Sorridente

A smiling face is drawn with a yellow circle for the head, two black eyes, and a mouth formed by a thick arc. React renders the SVG elements, while D3’s `arc` generator creates the mouth path with specified inner and outer radii and start and end angles. The head and eyes are simple SVG circles, with positions calculated relative to a central group transform. All dimensions and offsets are defined as constants in the React component.

Bbeq95

89% match

Loading thumbnail…

Faccia

A stylized face rendered as a purple SVG scene draws the viewer's eye with a yellow circular head, two black eyes, and a curved mouth. The left eyebrow animates up and down over two seconds using chained `transition` calls, while the right eyebrow remains static. Built with D3 v5, the example uses `select` to manipulate the SVG, `arc` to generate the mouth path, and simple shape attributes for circles and rectangles. The face is centered via a translated group element.

HHombreLobotomia

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

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

86% match

Loading thumbnail…

Face

This visualization displays a stylized, cartoon-like face composed of basic geometric shapes: a yellow circle for the head, circles for the eyes, rectangles for the eyebrows, and an arc for the mouth. The face is centered within an SVG canvas. The code uses D3.js v5’s selection and arc functions, and leverages the library’s built-in transition system to animate the eyebrows and mouth, creating a subtle, looping facial expression change.

RRodolfo Dutra

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

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

85% match