Smiley Face

100%

✓ Published1🌍 Public

Last edited Dec 18, 2018

Created on Dec 1, 2018

Forked from Sad Face

A yellow, black-outlined smiley face bounces side to side while its eyes shift in unison, and a red, semi-circular mouth reveals white teeth in an animated blink. Built with D3 v5, the visualization constructs the face from SVG ellipses and arc paths, using chained `.transition()` calls to animate the eye group’s horizontal movement and the mouth’s color change between red and white.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

A yellow SVG smiley face appears on a gray background, composed of a large circle, two elliptical eyes with red pupils, and a semicircular mouth drawn using the D3 `arc()` generator. The eyes, grouped in an `ellipseG`, animate through a series of `transition().attr(transform)` calls, shifting side-to-side before returning to center. After a five-second delay, the face’s fill color transitions from yellow to pink, while a white rectangle fades in to cover the mouth, altering the expression.

NNita

93% match

Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, featuring two solid black eyes and rectangular eyebrows. The eyebrows animate by moving downward and then returning to their original position over a sequence of transitions. The mouth is drawn using the D3 `arc` function to create a curved path. The visualization is built with React and D3 v4, rendering all shapes as SVG elements within a centered group, with animated transitions applied via `transition().duration()`.

NNicholas Stebbings

91% match

Loading thumbnail…

Smiley face

A yellow smiley face rendered in SVG animates its eyes, eyebrows, and mouth in a looping sequence. The face is built with D3 v5 selections and shapes, including circles for the eyes and an `arc` path for the mouth, all centered within an SVG of 960 by 500 pixels. The animation uses chained `transition` calls to move the eye group horizontally and shift the eyebrows vertically, creating a playful, winking expression. The code defines all dimensions and offsets as variables, and the rendering is fully client-side with no external data source.

Ssoniyaa-dv

91% match

Loading thumbnail…

Smile

A yellow smiley face with black-outlined features is drawn using D3.js v6. The SVG face has two circular eyes and a mouth formed by an annular arc path, with rectangular eyebrows that animate downward and back upward over a two-second transition. The code builds the face by positioning circles, rects, and an arc path relative to the SVG center, and relies on D3’s `transition` API to create the eyebrow movement. The animation is rendered in an SVG.

Wwei

91% match

Loading thumbnail…

Smiley d3

A yellow smiley face rendered as an SVG reacts to a repeating two-second animation cycle: its eyebrows shift downward and then reset, creating a winking effect. The face is composed of geometric primitives—circles for the head and eyes, rectangles for the brows, and a path for the mouth drawn with d3.arc. The code uses d3's selection API and transition system, running within VizHub's d3.v5 environment.

EEyob Westerink

90% match

Loading thumbnail…

Smiley face

A yellow smiley face with black eyes, eyebrows, and an arc-shaped mouth is drawn in the center of an SVG canvas using D3.js v6. The face is constructed with D3 selections and shape generators, including `d3.arc` for the mouth and appended SVG `circle` and `rect` elements. A brief animation occurs when the eyes transition their fill color to black after a one-second delay. The graphic is rendered as static SVG with a simple transition effect.

AArun

89% match

Loading thumbnail…

Smiley Face

A yellow smiley face rendered in SVG animates its eyebrows up and down. The face is drawn with a large yellow circle, two smaller black circles for eyes, and a mouth using an SVG path. Eyebrows are rectangles that move via chained D3 transitions. The code uses D3 v5 selections to build and style the SVG elements, and `d3.arc` to generate the mouth path. The background is a light green-gray, and the animation repeats once on load.

Aazrinsani

89% match

Loading thumbnail…

Smily Face

A yellow smiley face is drawn with SVG shapes, including circles for the eyes and an arc-based mouth, centered on a blank canvas. The code uses D3 v6 to construct the face and animates the eyebrows and mouth with chained `transition().duration()` calls, shifting their transforms over two-second intervals. The mouth path is generated using `d3.arc`, and the animation cycles the eyebrows up and down while rotating and recoloring the mouth. The example demonstrates basic SVG styling, grouping, and transition sequencing in D3.

CChristine Lanser

89% match