Skip to main content
SimilarExport ZIP
100%

svg smile

✓ Published1🌍 Public
Ssivakaman
Last edited Jul 6, 2020
Created on Jul 6, 2020
Forked from HTML Starter

A yellow SVG smiley face with black eyes and white pupils sits centered on a dark background. The pupils animate horizontally via chained `transition.attr` calls, shifting right then left. A lower arc path, drawn using the `d3.arc` generator, forms the smile. The example uses `d3.select` and `d3.arc` from D3 v5, with hardcoded positions and radii, and transitions lasting 1200 and 1400 milliseconds.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

svg smile

A cheerful cartoon face appears as a yellow circle with black outline, two black eyes, and white pupils that shift side to side before settling. The mouth is drawn as an arc path using the d3 `arc()` helper with specified inner and outer radii. Built with d3 v5, the visualization renders entirely in SVG and uses chained `transition().duration()` calls to animate the pupils horizontally across each eye. The code selects elements with d3’s `select`, appends shapes with `attr`, and relies on the `arc` generator to create the curved smile.

Ssivakaman
95% match
Loading thumbnail…

svg smile

A smiling face rendered in SVG shows two black eyes with white highlights that dart side to side, while a static arc forms the mouth. The animation uses chained `transition` calls on the eye highlight circles to shift their `cx` attributes over 1600 and 1400 milliseconds. Built with D3 v5, the code appends circles and a path using `d3.select`, `arc`, and shape helpers, with no external data source.

Ssivakaman
92% match
Loading thumbnail…

svg smile

A smiling face rendered in SVG shows two black eyes with white highlights that dart side to side, while a static arc forms the mouth. The animation uses chained `transition` calls on the eye highlight circles to shift their `cx` attributes over 1600 and 1400 milliseconds. Built with D3 v5, the code appends circles and a path using `d3.select`, `arc`, and shape helpers, with no external data source.

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

Smile face

A smiling face is drawn from SVG primitives: a yellow circle for the head, two black circles for the eyes, two rectangles for eyebrows, and an arc path for the mouth. The example demonstrates animated transitions, with the eyebrows moving up and then back down over two seconds using chained `.transition().duration()` calls. The scene is centered within a 960×500 SVG canvas using a `g` element translated to the midpoint. The code imports `select` and `arc` from D3 v5, and constructs the mouth’s arc path with the `arc()` generator, specifying inner and outer radii and angular spans.

SSungmi
88% 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
88% match
Loading thumbnail…

Smile

A yellow circle face with black eyes and animated eyebrows renders as an SVG in D3 v5. The code uses `select`, `arc`, and chained `transition` calls to lower and raise the rectangular brows over two seconds. A mouth path built from an arc with reversed inner and outer radii completes the expression. The static image shows a cheerful face, while the eyebrow animation adds a dynamic, playful smile effect.

BBeeehive
88% 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
88% match