Skip to main content
SimilarExport ZIP
100%

Making a smiling face

✓ Published1🌍 Public
Mmagua
Last edited Oct 2, 2020
Created on Oct 2, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

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

Making a smily face

A yellow smiley face is drawn on an SVG canvas with two eyes, a smile, and animated eyebrows. The face is centered using a D3 selection with the `translate` transform, and the mouth is created with the `d3.arc` path generator. The eyebrows use `transition().duration()` to move up and down over two seconds each, demonstrating chained D3 transitions. The code relies on `d3.select`, `d3.arc`, and SVG elements like `circle` and `rect`, all rendered with d3.v5.

Kketuckychix
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau
93% match
Loading thumbnail…

Let's Make a Face with D3.js!

A yellow smiley face is rendered in SVG, with the head as a circle, two eyes, and a mouth drawn using d3.arc. Animated eyebrows repeatedly move up and down via d3 transitions, changing their transform attribute over two seconds. The face is centered using D3 selections and attribute manipulation, with all shapes positioned relative to the SVG’s center. The visualization uses d3.select, d3.arc, and transition calls, with no external data source.

JJordan Arnold
92% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two black eyes, animated eyebrows, and an arc-shaped mouth forms a smiling face. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to append circles, rectangles, and a path built with `d3.arc`. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle animated expression. All elements are centered within an SVG of fixed dimensions using a translated group.

DDifan Gu
92% match
Loading thumbnail…

Making a face

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.

Ttgma99
92% match