Skip to main content
SimilarExport ZIP
100%

Smiley face

✓ Published0🌍 Public
Aalicjakot
Last edited Mar 21, 2020
Created on Mar 20, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, containing two white eyes with black pupils, a simple nose made of two connected lines, and a curved smile drawn with a D3 arc path. The SVG is built with React components, using d3.arc to compute the mouth’s path with specified inner and outer radii and angles. All shapes are positioned relative to a centered transform, with fixed dimensions and stroke widths defining the minimalist cartoon style.

Dddelorimier
94% match
Loading thumbnail…

Smiley face

This example displays a smiling face built from basic SVG shapes centered in the viewport. A yellow circle forms the head, with two smaller circles for eyes and a semi-circular arc for the mouth. The animation animates the eyebrows upward and downward in a looping transition, creating a playful expression. The code uses D3 v6’s `select`, `arc`, and `transition` methods to construct and animate the SVG elements within a React framework.

Vvuminhhieunus2019
94% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, set against a red background. Two smaller circles create the eyes, while a thick arc-shaped path forms the mouth. The drawing is centered using an SVG `g` element and a `translate` transform. The code uses d3’s `select` and `append` to build the SVG structure, and the `arc` generator to define the mouth’s path, with all coordinates calculated relative to the canvas center.

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

A Smiley Face

A Smiley Face is a simple SVG rendering of a classic smiley face, with a yellow circle, two black eyes, and a curved mouth. Built with React and D3 v7, the example uses D3’s `arc()` generator to compute the mouth path, while positions and radii for the face and features are defined via constants. The SVG is centered within a 960×500 viewport, and all shapes are drawn using React JSX elements within a `<g>` transform group.

Bbela
93% match
Loading thumbnail…

Smiley Face

A yellow smiley face is drawn with SVG using D3.js and React. The face includes a circle for the head, two eyes, and an arc-based mouth created with the `d3.arc` API. The eyebrows are animated vertically using D3 transitions, moving up and down over 1.5-second intervals. The code uses D3 selections to append and transform SVG elements, with all positions calculated from the SVG’s width and height attributes.

JJoseph Popoola
93% match
Loading thumbnail…

Smiley Face

A yellow smiley face is drawn on a blank SVG canvas using React and D3.js. The face consists of a large yellow circle for the head, two black circles for the eyes, and an arc-based mouth created with D3’s `arc` generator, which defines the path’s inner and outer radii and angular range. All coordinates and dimensions are computed relative to the canvas center, and the `<g>` group is translated to that origin to position the elements.

VVan Bui
93% match
Loading thumbnail…

Smiley Face

A yellow SVG smiley face with black eyes and eyebrows is drawn on a 960 by 500 canvas. Using D3 v6 selections and the `arc` generator, a mouth is created and shifted into place via a group transform. The eyebrows are rectangles that animate with chained `transition().duration(2000)` calls, moving downward then upward. The face’s features are positioned by computed width, height, and offset constants in a React-based D3 setup.

Ssravaniboggaram
93% match