Skip to main content
SimilarExport ZIP
100%

Let's make a face!

✓ Published0🌍 Public
MMatan
Last edited Nov 7, 2020
Created on Nov 7, 2020
Forked from HTML Starter

A yellow circle with a black outline, two dark eyes, and an arc-shaped mouth form a simple face. The eyebrows, drawn as rectangles, move up and down in a looping animation using D3's transition system. The SVG is generated with the `select`, `append`, and `arc` APIs, and the eyebrow movement is orchestrated with the `transition().duration()` and `.on("end", ...)` methods to repeat the motion. The face is centered in a 960x500 SVG canvas using a group transform.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Let's make a face

A yellow circle face with black eyes and rectangular eyebrows appears on an SVG canvas. The code uses D3 v5 selections, the `arc()` generator for the mouth, and chained `transition().duration()` calls to animate the eyebrows downward and back. All shapes are positioned relative to a centered group using explicit pixel offsets for eye spacing and eyebrow placement.

Lloicvdk
95% match
Loading thumbnail…

Lets make a face!!!!!

A yellow circular face with black eyes, eyebrows, and an arc-shaped mouth is drawn in the center of an SVG canvas. The eyebrows animate vertically, moving up and down repeatedly using D3 transitions with a 1000-millisecond duration. The face is assembled from SVG primitives including `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` function. The code uses d3-selection to append elements and d3-transition to animate the eyebrow group's transform attribute.

JJoshuaBruens
94% 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
94% match
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…

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

Let's Make a Face

A yellow circle face with black outlines displays two eyes, eyebrows, and an arc-shaped mouth on an SVG canvas. The eyebrows animate vertically, moving down and back up over a sequence of transitions. Built with D3 v5, the visualization uses `select` and `arc` from the D3 module to construct the facial features, with `transition` and `duration` controlling the eyebrow movement. The code generates the mouth using an arc generator with specified inner and outer radii and angles.

BbeauMarko
93% match
Loading thumbnail…

Let's make a face

A yellow circle with a black outline forms a face, featuring two black eyes and an arc-shaped mouth drawn using d3.arc. The animation uses D3 transitions to make the left eyebrow move up and down repeatedly, while the right eyebrow remains static. Built with D3 v6, the visualization manipulates SVG elements like circle, rect, and path, with all positioning centered via SVG coordinate transforms.

SSven Wanner
93% match