Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
RRidhuparan
Last edited Aug 24, 2023
Created on Aug 18, 2023
Forked from Hello HTML

This example uses React and SVG to render a static smiley face. The face is drawn with three SVG circle elements on a 960x500 canvas: a yellow outer circle for the head and two black circles for the eyes, all with visible black strokes. The React component renders only a heading, while the SVG markup is placed directly in the HTML body, so the visualization is not generated through React itself. The code relies on the React and ReactDOM production libraries and a bundled JavaScript file, though no interactive behavior is implemented.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face 1

This example renders a static smiley face using SVG shapes composed through React markup. The visualization presents a yellow circle with a black border as the face, alongside two unfilled black circles representing the eyes. The code uses React and ReactDOM to structure the SVG elements directly within the HTML page, with the `bundle.js` file loaded for the React runtime. The face is positioned based on a 960 by 500 canvas, using fixed coordinates for the facial features.

TTiagoDnts
95% match
Loading thumbnail…

Smiley

This example renders a simple smiley face using React and SVG. The visualization draws three circles: a large yellow head with a black stroke, and two smaller black circles positioned as eyes. The code leverages the React and ReactDOM libraries to mount the SVG graphic into an HTML page, with the circle elements defined using SVG properties for fill, stroke, position, and radius. No data is loaded or processed; the graphic is purely static.

SShreyansh shrey
95% match
Loading thumbnail…

Smiley Face

This example displays a static smiley face rendered as a yellow circle with two oval eyes, each containing a black pupil, and a curved mouth implied by the SVG shapes. Constructed with React 17 and plain SVG elements, the visualization uses hard-coded circle coordinates for the face and eyes, with yellow fill, black strokes, and thick stroke widths. The SVG canvas is set to 960 by 500 pixels, and the drawing is embedded directly in HTML without any interactive behavior or data-driven updates.

Rreshali35
95% match
Loading thumbnail…

Smily Face

This example displays a simple smiling face rendered as a static SVG graphic, composed of a yellow circular head with black eyes. The visualization is created using React, with the SVG elements defined directly in the HTML markup and styled via inline attributes for fill, stroke, and dimensions. The code references the React and ReactDOM libraries from a content delivery network, while the JavaScript file contains a minimal React component that renders a heading, though this component is not integrated into the displayed graphic.

PPipo
95% match
Loading thumbnail…

Smiley Face

A simple smiley face rendered with React and SVG. Three circles create the face and eyes on a 960 by 500 canvas, with the main face filled in yellow and outlined with a thick black stroke. The code uses React 18.2.0 and ReactDOM to render a separate "Hello" heading, while the face itself is drawn as raw SVG markup within the HTML body. The SVG is generated from static coordinates, showing a basic composition of graphical primitives without interactive behavior.

RRamakrishna Katragadda
95% match
Loading thumbnail…

Smiley Face

This example shows a simple smiley face rendered as a static SVG graphic. A large yellow circle forms the head, with two smaller black circles representing the eyes; the mouth is not drawn in this version. The visualization uses React 18.2.0 via a UMD script tag, though the SVG elements are written directly in the HTML markup rather than generated through React components. The code sets the SVG viewport to 960 by 500 pixels and applies basic styling for the circle fills and stroke.

AAndres Perdomo
95% match
Loading thumbnail…

Smiley Face pt. 1

This example shows a static smiley face drawn as three SVG circles: a large yellow circle for the face and two smaller black circles for the eyes, all centered on a 960-by-500 canvas. The code uses raw SVG elements inside an HTML page, with React loaded via CDN to render a separate, unused “Hello JSX” component. The face itself is not generated through React or any charting library; instead, it relies on hardcoded coordinates for each circle’s position and radius, with stroke and fill attributes controlling the outline and color.

TTay
95% match
Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face rendered as a simple SVG graphic. The face consists of three circles: a large yellow circle for the head and two smaller black circles for the eyes, all drawn directly in the HTML markup. The code uses React 16.9.0 and ReactDOM to mount a separate “Hello JSX” component, though the smiley face itself is plain SVG without React involvement. The rendering approach relies on explicit SVG attributes for positioning and styling, with a viewport of 960 by 500 pixels.

Bbartlomiejkoszek
95% match