smily

100%

✓ Published1🌍 Public

Last edited Aug 15, 2023

Created on Aug 15, 2023

This visualization shows a smiling face that reacts to hover interactions. The SVG draws a yellow circular face with black eyes and an arc-shaped mouth. When the user hovers over the face, the `fill` property transitions from yellow to red via CSS, and the mouth’s `d` path attribute animates from a smile to a frown using a CSS `transition` on the `d` property. The code relies on inline SVG elements, CSS transitions, and the `:hover` pseudo-class.

AI-generated description

A bare minimum HTML page.

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

86% 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

86% match

Loading thumbnail…

Smiley 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.

NNita

85% 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

85% match

Loading thumbnail…

Smiley face

This visualization displays a simple yellow smiley face rendered as SVG, composed of a circular face, two black eyes, and an arc-shaped mouth. The code uses D3 v5’s `select` and `arc` APIs to construct the path for the mouth, while positioning all elements relative to the SVG’s width and height. The face is drawn with a circle, and the eyes are offset from the center using explicit pixel coordinates. The `arc` generator defines the mouth’s inner and outer radii with start and end angles, producing a fixed smile shape.

Ssrwezuva

84% match

Loading thumbnail…

smily

A yellow smiling face with eyes, eyebrows, and a mouth is drawn in SVG using D3 v7. The face is centered via a translated group, and the mouth is created with the `d3.arc` API. Eyebrows animate up and down using chained `transition` calls over two seconds each. The visualization loads D3 from UNPKG and imports `select` and `arc` from the `d3` module.

KkarthikGT

84% 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

84% match

Loading thumbnail…

smile face

A yellow smiley face is drawn in SVG, with black eyes, eyebrows, and a semi-circular mouth. The eyebrows animate by shifting their vertical position using chained D3 transitions. The face is constructed with D3 selections, using `circle` and `rect` elements for the features, and a `path` created with the `d3.arc` generator for the mouth. The entire group is centered and scaled, with the animation triggered on page load.

YY-oringe

84% match