Skip to main content
SimilarExport ZIP
100%

Smiley

✓ Published0🌍 Public
VVigyoRex
Last edited Oct 21, 2019
Created on Aug 13, 2019

A smiling face is rendered as a static SVG figure, with a purple circular head, two eyes, and a curved mouth drawn using a D3 arc path. The eyebrows, created as rectangles, animate up and down in a repeating sequence via chained `transition.attr` calls. The visualization uses D3 v5's `select`, `arc`, and SVG element creation, with all coordinates computed relative to the viewport’s center.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

This example draws a cheerful smiley face as a static SVG graphic, composed of a yellow circle, two elliptical eyes, rectangular eyebrows, and a curved mouth generated with the `d3.arc()` function. The figure is centered by translating a group element based on the SVG’s width and height. The right eyebrow animates by using D3’s `transition().duration()` to shift its vertical position, moving down and back up over two seconds.

Mmbergevoet
91% match
Loading thumbnail…

Smiley

This visualization displays a simple smiley face constructed entirely with SVG shapes. A large yellow circle forms the face, with two smaller black circles for eyes and a black arc for the mouth, all positioned against a cyan background. The code uses d3.select to target the SVG element and appends circles and a path for the mouth. The path is created using the d3.arc function, which defines the inner and outer radii and the start and end angles of the arc.

Ssakthi1001
90% match
Loading thumbnail…

Smiley

This visualization displays a simple smiley face constructed entirely with SVG shapes. A large yellow circle forms the face, with two smaller black circles for eyes and a black arc for the mouth, all positioned against a cyan background. The code uses d3.select to target the SVG element and appends circles and a path for the mouth. The path is created using the d3.arc function, which defines the inner and outer radii and the start and end angles of the arc.

Ssakthi1001
90% match
Loading thumbnail…

Smiley

The visualization assembles a basic smiley face from three SVG circles and one arc path, showing how primitive shapes combine into a recognizable icon. The code uses D3 v7 to select the SVG container and create a mouth via `d3.arc()`, with specified inner and outer radii and start/end angles. The eyes and face outline are plain SVG elements with fixed coordinates, pink fill, and black stroke. The example demonstrates minimal D3 integration, relying mostly on static markup for the face while reserving D3 for the path generation.

Nnikitamakkena
90% match
Loading thumbnail…

Smiley face

A smiling face built with SVG draws its features from geometric shapes, including a yellow circle, two eyes, and an arc for the mouth. The eyebrows are rectangles that animate upward and back down in an infinite loop using chained `transition` calls. The code uses `d3.arc` for the mouth path and D3 selections with `attr` to position elements. All shapes are appended to a centered `<g>` group within a fixed 960×500 SVG canvas.

Aalicjakot
89% 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

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

Smile

A smiling face drawn with SVG shapes animates its eyebrows in a playful blinking motion. The yellow circle face, black eyes, and curved mouth are constructed using D3's `arc` and basic SVG circle elements. Eyebrow movement is achieved through chained `transition().duration(200)` calls that shift the path's transform attribute up and down. The visualization uses D3 v6 and renders entirely in SVG with no external data source.

YYash Goyal
89% match