Skip to main content
SimilarExport ZIP
100%

Let's make an Face

✓ Published1🌍 Public
KKelseyXu5
Last edited Jan 15, 2022
Created on Jan 14, 2022
Forked from HTML Starter

A yellow face with black outlines and animated eyebrows is rendered in SVG. D3.js v7 builds the facial features by appending a circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows animate upward and back down using chained `transition().duration(2000)` calls on a group element. Static geometry is positioned via SVG attributes and transforms, with the visualization centered in a 960×500 viewport.

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

Let's make a Face with D3.js!

A yellow face with black features is drawn in SVG using D3.js v5, centered within a 960-by-500 viewport. The example uses `d3.select` to append a group, circles for eyes, a nose, and eyebrow rectangles, plus a mouth constructed with `d3.arc` for the path data. A `transition().duration(2000)` animates the eyebrows downward then back to their original offset. The code runs in a React starter, but renders directly to the SVG element using D3’s selection and arc APIs.

MMayaJava
93% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlined features animates its eyebrows up and down. The visualization builds the face using d3.svg append operations, positioning circles for eyes, rectangles for brows, and a d3.arc path for the mouth. The eyebrows transition vertically via d3.transition. The SVG face is centered using a translated group, with all coordinates computed from the viewport dimensions.

IIcecreamneverfall
93% match
Loading thumbnail…

Let's Make a Face

A yellow circle face with black outlined features animates its eyebrows up and down. The visualization builds the face using d3.svg append operations, positioning circles for eyes, rectangles for brows, and a d3.arc path for the mouth. The eyebrows transition vertically via d3.transition. The SVG face is centered using a translated group, with all coordinates computed from the viewport dimensions.

IIcecreamneverfall
93% match
Loading thumbnail…

Let's Make a Face with D3.js

A yellow face with eyes, eyebrows, and a mouth is built from SVG shapes using D3.js v5. The code uses `d3.select` and `d3.arc` to construct the face, with circles for eyes and a path for the mouth. Eyebrows are rectangles that animate via `transition.attr` over two seconds, moving up and down. The rendering is SVG-based, centered in a 960×500 viewport, with static geometry defined by numeric constants.

AAloysius
93% match
Loading thumbnail…

Let's make face with d3

A stylized yellow face is drawn with D3.js in an SVG, using geometric shapes for the eyes, eyebrows, and an arc-based mouth. The eyebrows animate upward and downward via a chained `transition().duration(2000)` sequence on the group’s `transform` attribute. Eye and eyebrow positions are derived from constants like `eyeSpacing` and `eyeYOffset`, while the face circle scales to the SVG’s height. The code relies on `select`, `append`, and the `arc` generator from D3 v6.

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

Let's make a face with d3.js!

A yellow face built with SVG circles, rectangles, and arcs animates its expressions. The face’s eyebrows shift downward and upward via chained `transition().duration()` calls, while a smile arc flips into a frown using the same timed transforms. The code constructs the face by appending SVG groups and shapes with d3 v5’s `select` and `arc` APIs, positioning elements relative to the center of a 960×500 SVG. Static facial features—eyes, irises, and a mouth—are drawn with basic geometry, while the background turns red through a direct DOM style update.

Ccacho2294
92% match