Skip to main content
SimilarExport ZIP
100%

Happy face :)

✓ Published1🌍 Public
Nnobbak
Last edited Oct 13, 2019
Created on Sep 26, 2019

A cheerful, hand-drawn-style face rendered as a yellow circle with black outlines, two eyes, and a curved smile, all built with D3 v5. The eyebrows blink repeatedly via chained `transition().duration()` calls that move them up and down every two seconds. The smile is drawn using the `d3.arc` path generator with specified inner and outer radii and angles. This static SVG animation demonstrates basic shape composition and timed attribute transitions in D3.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

face

A smiley face drawn with D3.js animates its eyebrows up and down in a looping transition. The SVG face uses a yellow circle, two eye circles, and an arc-generated mouth, while the eyebrows are rectangles that move via chained `transition.attr` calls over two-second intervals. D3 v5’s `select` and `arc` APIs build the static elements, with the animation driven by D3’s transition system.

Ssatishnarne99@gmail.com
90% match
Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow smiley face is drawn in SVG with D3.js, featuring two eyes, animated eyebrows, and an arc-shaped mouth. The eyebrows transition upward and back down over four seconds using chained `transition().duration()` calls. The code builds the face by appending circles for the head and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` helper for the mouth, all grouped and translated to center the composition.

EEric Torres
89% 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
89% match
Loading thumbnail…

face

A yellow smiley face is drawn as an SVG circle with black-stroked eyes and an arc-shaped mouth. Using D3.js v5, the code selects and appends SVG elements to a 960x500 canvas, centering the face via a translation. The eyebrows, rendered as rectangles, animate upward and downward through chained `transition` calls with a 2000-millisecond duration, demonstrating fundamental DOM manipulation and data-join-free animation.

Mmyoung1032
89% match
Loading thumbnail…

face

A yellow smiley face is centered in an SVG canvas, with two eyes, a mouth drawn using a D3 arc path, and rectangular eyebrows that animate upward and back down in a looping transition. Built with D3 v5, the example demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups and shapes, and using chained `transition().duration()` calls to move the eyebrows via transform attributes.

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

Let's make a happy face

This example draws a yellow circle face with two black eyes, rectangular eyebrows, and an arc-shaped smile using SVG. The eyebrows animate upward and back down via D3 transitions over two seconds. The code sets element positions with absolute `x`, `y`, `cx`, `cy` coordinates and uses D3’s `arc()` generator to define the mouth path. The D3 v7 library handles SVG construction and the two-stage `transition().duration()` animation.

RRYAN
89% match
Loading thumbnail…

Lets make a Face!

A yellow smiley face appears centered on an SVG canvas, built from D3 shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth. The eyebrows animate upward and back down repeatedly using D3's `transition()` with a two-second duration. The code uses `d3.select`, `d3.arc`, and attribute setters to construct the static face, while the animation is driven by chained `transition().attr()` calls, rendering in SVG.

OOvxOO
89% match