Skip to main content
SimilarExport ZIP
100%

Make a face!

✓ Published1🌍 Public
HHanyang
Last edited Jul 10, 2019
Created on Jul 10, 2019
Forked from Blank Canvas

A smiling face made of yellow SVG shapes animates as its eyebrows repeatedly lift and lower. The visualization uses D3 v5 selections and transitions to move the eyebrow rectangles along the y-axis over two one-second intervals. The face is constructed with D3's `arc` generator for the mouth and appended circle and rect elements for the eyes and brows, all centered within an SVG canvas.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Make a face!

A smiling face made of SVG shapes uses D3 v5 to animate its eyebrows in a looping motion. The yellow circle head, black-outlined eyes, and arc-based mouth are drawn with D3 selections and the `d3.arc` path generator. Eyebrow rectangles transition vertically via chained `transition().duration()` calls, moving up and down repeatedly. The static SVG is centered using a group transform, and the animation runs automatically on page load.

HHanyang
95% match
Loading thumbnail…

Make a face!

A yellow smiley face is drawn on a black-outlined circle, with animated eyebrows that move up and down and two static eyes and a mouth. The face is constructed using SVG shapes via D3 v5, with the mouth created using the `arc` generator. Eyebrow animation is driven by chained `transition` calls that alternate their vertical position. The code imports `select` and `arc` directly from D3 and builds the scene in an SVG container.

KKatStam
92% match
Loading thumbnail…

Making Face

A simple face made of SVG shapes smiles as its eyebrows repeatedly rise and fall. Built with D3 v6, the visualization uses `d3.select`, `d3.arc`, and chained `transition` calls to animate the eyebrows over two-second intervals. The face is centered in an SVG canvas, with circles for eyes, a path for the mouth, and rectangles for eyebrows, all drawn in a bright yellow with black outlines.

NNoobSaiyan
92% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of yellow SVG shapes animates its eyebrows upward and downward in a loop. Built with D3 v5, the example uses basic selections to append and style a circle, two eye circles, rectangular eyebrows, and an arc-shaped mouth. The `arc` generator creates the mouth path, while chained `transition().duration()` calls animate the eyebrow group’s translate transform over two seconds each way. The SVG is centered via a translated group based on the viewport dimensions.

Bbluesibra
91% match
Loading thumbnail…

Making a smiling face

A yellow circle with black outlines forms a smiling face, featuring two eyes, curved eyebrows drawn as arc paths, and a wide, open smile created with a D3 arc generator. The entire composition is centered within an SVG using a group transform. The eyebrows animate via chained `transition().duration(2000)` calls, shifting their vertical position up and down in a continuous loop. The visualization uses D3 v5 selections and the `arc()` shape generator, rendering static SVG elements with JavaScript-driven animation.

Mmagua
91% match
Loading thumbnail…

Make a face

A yellow circle with black outlines forms a face, featuring two eyes, eyebrows, and an arc-shaped mouth drawn in SVG. The eyebrows animate upward and downward in a repeating loop using D3 transitions. The visualization uses D3 v7 APIs including `select`, `arc`, and `transition` to construct the facial features relative to the center of an SVG canvas sized 960 by 500. All elements are positioned using SVG transform attributes.

陳陳泰元
91% 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
91% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3
91% match