Skip to main content
SimilarExport ZIP
100%

Making a face

✓ Published1🌍 Public
Ttgma99
Last edited Jun 8, 2022
Created on Jun 6, 2022

A smiling face made of SVG shapes animates inside a yellow circle. D3 v7 transitions shrink and regrow the right eye, while both eyebrows shift downward and then return. The mouth is drawn with the `d3.arc` path generator as a partial ring. Elements are grouped and positioned with SVG transform attributes, and chained `transition` calls drive the two-step animation.

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

Making a face

A yellow circle with eyes, eyebrows, and a mouth forms a face using D3 v5 selections and SVG shapes. The right eyebrow animates upward and back down via chained `transition().attr()` calls over two seconds each, while the mouth is drawn with `d3.arc()`. All elements are positioned relative to a centered group, with eyes offset by fixed pixel distances, creating a simple, animated cartoon face.

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

Making a face

A yellow circle face with two eyes and eyebrows is rendered in SVG, with the right eyebrow animating upward and downward over two seconds. The mouth is drawn as a half-circle arc using the `d3.arc` helper. Built with D3 v5, the code uses `select`, `attr`, and chained `transition` calls to control the animation, positioning elements via SVG transforms.

Rrcumani
92% match
Loading thumbnail…

Lets Make a Face

A yellow smiley face animates on an SVG canvas as its eyes and eyebrows move independently and its mouth is drawn with an arc path. The example demonstrates D3 v7 transitions, using `d3.select`, `d3.arc`, and chained `.transition().duration()` calls to shift eye positions and raise eyebrows over different time intervals. SVG elements—circles for eyes, rectangles for eyebrows, and a path for the mouth—are appended to a centered group, showing how D3 manipulates attributes and transitions to create simple character animation.

Ggabrielribeirob
92% match
Loading thumbnail…

Let's make a face!

A smiling yellow face is drawn in SVG using D3 v7, with a circle for the head, smaller circles for eyes, and an arc-generated path for the mouth. The eyebrows, rendered as rectangles, animate upward and back down via chained `transition` calls. This example demonstrates basic SVG shape creation and animation with D3's selection and arc API.

LLYD
92% match
Loading thumbnail…

Let's make a face

A yellow circle becomes a smiley face as the animation runs. D3 v5 builds the face from SVG shapes—a circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc path for the mouth—centered within an SVG canvas. The left eyebrow briefly moves upward via chained `transition` calls, while all other elements remain static. The code uses d3-selection, d3-arc, and SVG attributes, with no external data source.

Jjf1978
92% match