Skip to main content
SimilarExport ZIP
100%

Face!!

✓ Published1🌍 Public
AAtrayeeDeb
Last edited Apr 30, 2021
Created on Apr 30, 2021
Forked from Shapes

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face!

A yellow circle with black facial features forms a simple, animated face. The eyebrows repeatedly rise and lower over the eyes via chained `transition()` calls with a two-second duration. Built with D3 v5, the visualization uses `select`, `arc`, and `attr` on SVG elements, positioning the face’s parts relative to the center of a 500-by-500 viewport.

SSadi Hassan
94% match
Loading thumbnail…

D3 Face

A yellow circle with black outlines forms a face, featuring two eyes, rectangular eyebrows, and a half-circle mouth. The eyebrows animate by moving upward over two seconds and then returning to their original position. The visualization is built with D3 v7, using SVG shapes within a root group, and the mouth is drawn with the `d3.arc` path generator. The animation relies on chained `transition().duration()` calls, offering a simple, playful demonstration of D3's selection and transition methods.

Hhenryspradlin
92% match
Loading thumbnail…

Making Face

A yellow circle with a black outline forms a face, featuring two eyes, rectangular eyebrows, and a mouth shaped as a semicircular arc. The eyebrows animate by moving upward and back down over two seconds, using D3 transitions. The visualization uses D3 version 6’s `select`, `arc`, and `transition` methods, rendering shapes as SVG elements within a 960x500 viewport. The code constructs the facial features via appended circles, rects, and a path, with the mouth defined by an inner radius of 150 and outer radius of 170.

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

Face!

A yellow face with black outlined eyes, animated eyebrows, and a wide open mouth is drawn using SVG. The face is centered in a 960 by 500 pixel viewport, built with D3 selections and shape generators. Eyebrows move up and down through a chain of `transition` calls that alter a `g` element’s `transform`. The mouth uses the `d3.arc` path generator with specified inner and outer radii and angular extents, all rendered as static and animated SVG elements.

RRyan
91% match
Loading thumbnail…

Face With D3

A yellow circle with black outlines forms a face, featuring two eyes, animated eyebrows, and a mouth drawn as an arc. The code uses d3-selection to append SVG shapes and d3-transition with chained 2000-millisecond transitions to move the eyebrows downward and back. The d3.arc() API generates the mouth path, while attribute manipulation handles positioning and styling.

Iikimes
91% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black eyes and animated eyebrows is drawn using SVG. The eyebrows move up and down through chained transitions that alternate their vertical offset. D3 v6's `select`, `arc`, and `transition` APIs construct the face, with the mouth rendered as an arc path and eye positions set via fixed coordinates.

BbeauMarko
91% match
Loading thumbnail…

D3 Face

A yellow circle with black strokes forms a face, featuring two eyes and eyebrows that animate in a blinking motion, while a mouth is drawn as an arc. The eyes scale vertically to simulate blinking, and the eyebrows shift upward twice before returning. Built with D3 v3, the visualization uses SVG elements and transitions, leveraging `select`, `arc`, and chained `transition` calls to orchestrate the timed animations.

JJonah Meijers
91% match