Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Bbut-whythough
Last edited Mar 10, 2021
Created on Mar 10, 2021

A smiley face drawn in yellow with black outlines animates by raising its rectangular eyebrows upward, holding, and then lowering them back. The face uses D3.js to construct SVG shapes, including circles for the eyes and an arc path for the mouth. The animation sequences through chained transitions, each lasting two seconds, to move the eyebrow group along the y-axis. The code relies on D3's `select` and `arc` functions, with a React-based HTML file providing the page scaffold.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A yellow smiley face with black eyes and eyebrows animates its eyebrows upward and downward in a looping motion over two seconds. The SVG face includes a frowny mouth drawn using D3's `arc()` path generator, with the entire scene rendered at 200x200 pixels. The code uses D3 v5 selections and transitions to move the eyebrow group, while static elements like the head, eyes, and tears are pre-defined in the HTML. The animation runs without user interaction, repeating the eyebrow movement indefinitely.

PPatilShruti20
94% match
Loading thumbnail…

Untitled

A D3.js animation draws a yellow smiley face whose eyebrows bob up and down. The code builds the face from SVG shapes—circles for the eyes and head, rectangles for the brows, and an arc-generated path for the mouth—centered via a translated group. Using `d3.select` and `d3.arc`, it applies chained `transition().duration()` calls to animate the eyebrow group’s vertical position, creating a looping motion. The rendering is a lightweight DOM manipulation example with no external data, running entirely in the browser.

Ddok0086m
93% match
Loading thumbnail…

Untitled

A yellow smiley face with black eyes and a curved mouth sits centered on a black background, while its rectangular eyebrows bounce up and down in a looping two-second animation. The example demonstrates fundamental DOM manipulation using D3.js v3, building the face from SVG shapes like circles, rectangles, and an arc path. The eyebrows move via chained `transition()` calls with a 2000-millisecond duration, toggling their vertical offset back and forth. All rendering is done through D3 selections and the `arc()` helper, with no external data source.

DDebaliena
93% match
Loading thumbnail…

Untitled

A yellow smiley face with black-outlined eyes and a wide open mouth is rendered in D3.js. The animation moves the face’s rectangular eyebrows upward and back down in a looping transition. The code uses D3’s `select`, `arc`, and `transition` APIs to construct the SVG shapes and animate the eyebrow group’s transform attribute over two sequential two-second durations. The visualization demonstrates fundamental DOM manipulation by building each facial feature from primitive SVG elements.

Aaudreyfr
92% match
Loading thumbnail…

Untitled

A smiley face rendered with D3.js animates its eyebrows by moving them up and down in a looping transition. The face is built from SVG shapes, including a yellow circle for the head, two circular eyes, rectangular eyebrows, and a mouth created using the `d3.arc` path generator. Eyebrow movement is driven by chained `transition().duration(2000)` calls that alter the group’s translate transform, demonstrating fundamental DOM manipulation and animation sequencing in D3.

VVidhuS
92% match
Loading thumbnail…

Untitled

A yellow smiley face with black features animates on a blank canvas. D3.js transitions move both rectangular eyebrows up and down in a repeating two-second cycle, while the eyes and an arc-shaped mouth remain static. The code uses D3’s `select`, `arc`, and chained `transition` with `duration` to manipulate SVG elements, specifying positions and dimensions via hardcoded constants for the face’s geometry. The rendering is a pure SVG animation driven entirely by D3’s DOM manipulation and transition methods.

Iiperalta94
92% match
Loading thumbnail…

Untitled

A yellow circle with a black outline represents a face, featuring two black eyes and rectangular eyebrows. The eyebrows animate vertically, moving down and back up over two seconds each, creating a surprised or blinking expression. The visualization is built with SVG primitives and animated using D3 v7's transition methods. The mouth is drawn as an arc path using D3's arc generator, and the layout is positioned using explicit coordinates.

Hharshb863
90% match
Loading thumbnail…

smiley face

A yellow circle with black outlines forms a smiley face, complete with eyes, eyebrows, and a smiling mouth. The eyebrows animate by moving upward and then returning to their original position over four seconds. Built with React and D3.js v5, the visualization uses SVG shapes like circles and rectangles, with the mouth drawn via the `arc` function. The animation is achieved through chained `transition` calls that modify the eyebrow group's transform attribute.

MMichael Milano
89% match