Skip to main content
SimilarExport ZIP
100%

Smiley face

✓ Published0🌍 Public
Vvuminhhieunus2019
Last edited May 19, 2021
Created on May 17, 2021
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Smiley face

This example uses React and D3 v6 to render a smiley face as an SVG. The face is composed of a yellow circle for the head, two smaller circles for eyes, and a mouth drawn with a D3 arc path generator. The code positions the head and features relative to calculated center coordinates, with the arc’s inner and outer radii defining the mouth’s thickness and its angles creating the smile. All shapes are centered within a 960×500 viewport using a translated group element.

KKibegwa
92% match
Loading thumbnail…

Smiling Face

This example presents a cheerful animated face built with React and SVG, rendered in a web browser. The face features a yellow circle, eyes, eyebrows, and a mouth, with the eyebrows moving up and down in a looping animation. The code uses the D3.js library, specifically `d3.select`, `d3.arc`, and the `.transition().duration()` API to create the motion. The shape is composed of SVG elements, including circles, rectangles, and a path for the mouth, which are constructed programmatically based on computed values. The animation runs continuously, shifting the eyebrow group vertically between two positions.

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

Smiley face

This example shows a simple smiley face drawn entirely with SVG shapes: a yellow circle for the head and two black circles for the eyes, centered in a 960-by-500 viewport. The face is not yet complete, as the mouth is missing. The visualization is built with React and D3 v7, using D3’s `arc` import (though unused in the final render) and hardcoded circle coordinates. React renders the SVG elements directly, with the head’s radius and stroke width derived from the center and height constants to keep proportions consistent.

Ffutureofworld
92% match
Loading thumbnail…

Smiley Face

This example renders a yellow smiley face with two eyes and a mouth using React and SVG. The face is centered within a 960×500 viewport, with the head drawn as a circle and the mouth constructed via a d3.arc() path using specified inner and outer radii and angular ranges. The code uses ReactDOM to mount the component and leverages D3 v6’s arc generator for the curved mouth shape. All elements are positioned using inline transform attributes.

JJohn Kobbeman
92% match
Loading thumbnail…

Smiley face

This example creates a simple smiley face using D3.js and SVG. It draws a yellow circle for the face, two black circles for the eyes, and a mouth using an arc generator with specified inner and outer radii. The code uses D3 selections from the `d3` module, including `select` and `arc`, to create the shapes. The visualization is rendered in a React starter template with a fixed SVG size of 860 by 400 pixels.

Kkaviya-ds
92% match