Skip to main content
SimilarExport ZIP
100%

Smiley face

✓ Published2🌍 Public
Ssoniyaa-dv
Last edited Jul 31, 2020
Created on Jul 22, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Smiley Face with D3.js

A yellow smiley face rendered in SVG appears, composed of circles for the head and eyes, rectangles for eyebrows, and an arc for the mouth. The eyebrows animate upward and downward using chained D3 transitions. Built with D3.js v5, it employs `select`, `arc`, and `transition`, drawing all shapes on a blank 900x500 canvas without an external dataset.

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

Smiley face using D3

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation, with animated eyebrows that move up and down. The code draws yellow circles for the face and eyes, rectangles for eyebrows, and an arc-generated mouth, all positioned via D3 selections and transforms. A transition chain animates the eyebrow group’s vertical position over four one-second intervals, showcasing repeated attribute updates. The example relies on D3 v5’s `select`, `arc`, and `transition` APIs within a static SVG container.

AAyush Gupta
91% match