Skip to main content
SimilarExport ZIP
100%

Smiley face

✓ Published0🌍 Public
FFoair
Last edited Apr 30, 2022
Created on Apr 30, 2022
Forked from HTML Starter

A single SVG smiley face is drawn with an orange circle, two black eyes, and a mouth. The face is centered on a 960 by 500 canvas. The shape is constructed using React elements for the circles and a D3 `arc` generator to define the mouth path, which is styled with a thick stroke. The entire graphic is rendered within an SVG viewport, with dimensions and positions calculated in JavaScript.

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 smiley face is drawn as an SVG graphic centered on a 960x500 canvas. The face features a circular head, two eyes with green pupils, a purple nose, and a curved mouth, all rendered with black strokes and thick line segments for eyebrows and hair. The visualization uses React for rendering and d3.arc to create the mouth path. All shapes are positioned with absolute coordinates, and the code relies on d3.v7 and React 17 to produce the static vector illustration.

Ttrucntx007
93% match
Loading thumbnail…

Smiley face I

A simple smiley face is drawn as a static SVG graphic, centered on a 960 by 500 canvas. The face consists of a large yellow circle with a black outline for the head, two smaller black circles for eyes, and a half-circle arc for the mouth. The visualization is built with React 18 and D3 v7, using the `arc` API to generate the mouth’s path. All shapes are positioned relative to the center using D3’s arc generator and React’s JSX for the SVG markup.

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

Smiley Face

A yellow smiley face rendered as a scalable vector graphic (SVG) sits at the center of a 960×500 canvas. A bold black circle outlines the yellow face, with two black eyes and a thick smile drawn using an SVG path. The code uses React to structure the SVG elements and D3 v7's `arc` generator to compute the mouth's curved path based on inner and outer radii and start and end angles. The geometric coordinates for the face, eyes, and stroke are calculated dynamically from the canvas dimensions and fixed offsets.

Aalismath
93% match
Loading thumbnail…

Smily Face with Svg

A smiling face is drawn as a simple orange circle with two black eyes and a black arc for the mouth, all rendered as SVG shapes. The visualization is built with React, which creates the SVG elements, and uses the `d3.arc` function to generate the path data for the smile. The code constructs the face by positioning the eyes relative to the center and uses the D3 arc generator to define the mouth’s curved shape. The rendering is purely vector-based, with no external data source.

KKhurrumAliQualyval
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

A smiling face is drawn as a yellow circle with black outlines, using two smaller circles for eyes and an arc-shaped path for the mouth. The visualization is built with React, where the SVG elements are declared in JSX. It uses D3’s `arc` function to generate the mouth’s path data, with explicit angles and radii controlling the smile’s curvature. The complete graphic is rendered to the page via `ReactDOM.render`.

BBlake Fitzpatrick
92% match