Skip to main content
SimilarExport ZIP
100%

Smiley face

✓ Published1🌍 Public
AABI DAVID LIVING-STONE
Last edited May 27, 2022
Created on May 27, 2022
Forked from HTML Starter

This example displays a classic yellow smiley face rendered as SVG shapes: a large circle for the face and two smaller circles for the eyes, all with black strokes. The page combines static SVG markup in `index.html` with a React app initialized in `index.js` using React 18 and ReactDOM, though the React component currently only renders a placeholder heading. The face itself is drawn directly in the HTML without JavaScript-driven data or interactivity, showcasing a simple hybrid of vanilla SVG and React setup.

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

This example shows a static yellow smiley face drawn with two black eyes on a plain background. The face is rendered as SVG shapes inside an HTML page. The visualization uses React and ReactDOM libraries to render the SVG elements, with the page structured as a single `<svg>` containing three `<circle>` elements for the face and eyes. The simple geometric shapes and fixed coordinates define the entire graphic without any interactive or animated behavior.

CChin-Long Shu
94% match
Loading thumbnail…

SMILEY FACE

This example shows a simple smiley face rendered as SVG circles on a yellow background. A large yellow circle forms the face, with two smaller black circles for eyes. The code uses React and ReactDOM, with basic SVG circle elements for rendering. Although an index.js file imports React and defines an App component, the actual SVG is placed directly in the HTML body, not generated by React. The page includes the React production bundle and a separate bundle.js script.

Hhjaitak
94% match
Loading thumbnail…

SmileyFace

This example renders a simple smiley face as a static SVG graphic. The visualization shows a yellow circle with a black stroke as the face, two solid black circles for eyes, and no mouth, though the markup for a mouth is commented out. Built with React, the code defines an `App` component that returns a minimal `<h1>hello</h1>`, while the SVG elements are present only as commented-out JSX. React and ReactDOM are loaded via CDN, and the page mounts the component to a `root` div, though the current render does not display the face.

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

smiley face

This example shows a classic smiley face rendered as a static SVG graphic: a yellow circle with a black outline, two black eye circles, and an implied mouth. The visualization is built using plain HTML5 SVG elements, with the face centered on a 960×500 canvas and positioned using explicit coordinates for each shape. The page loads the React and ReactDOM production libraries via CDN, though the actual visible graphic does not depend on React scripting; instead, the SVG markup is written directly in the HTML body. A minimal React app in `index.js` renders only a heading, leaving the smiley face as a purely declarative SVG illustration.

CCarmela Policarpio
94% match
Loading thumbnail…

Smiley Face

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.

RRidhuparan
94% match
Loading thumbnail…

Smiley face

This example renders a classic smiley face as static SVG shapes using React. Two black circles form the eyes, while a larger yellow circle with a black stroke serves as the face; the commented-out code hints at an unfinished mouth. It uses React 18 and ReactDOM to mount components into a root div, with all drawing done via SVG elements. The simple composition demonstrates basic geometric shape composition and styling in a React-driven visualization.

Nnatsgeorge.ng@gmail.com
94% match
Loading thumbnail…

Smiley face

A yellow circle with a black outline forms the face, containing two smaller black circles as eyes. The example demonstrates static SVG rendering with React, though the React library is loaded but not actively used for drawing. Instead, the visualization is created directly using SVG elements like `circle` for the face and eyes, with hardcoded coordinates and styling. The page loads React and ReactDOM via UMD bundles, but the final graphic relies purely on raw SVG markup within the HTML.

Ffutureofworld
94% match