Skip to main content
SimilarExport ZIP
100%

Smiley face 1

✓ Published0🌍 Public
SSoumya0305
Last edited Apr 6, 2022
Created on Apr 6, 2022
Forked from HTML Starter

A yellow smiley face with black outlines is drawn on an SVG canvas. Two smaller black circles form the eyes, while a wide yellow circle with a thick stroke serves as the face. The page uses plain HTML, CSS, and JavaScript within a React starter template. It renders static SVG elements with explicit coordinates and attributes, demonstrating basic vector shape composition without interactive behavior or data binding.

AI-generated description

half way towards smiley face. HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley face part 1

This example displays a static yellow smiley face composed of three SVG circles, drawn on a 960-by-500 canvas with a black outline. It shows a basic vector face, but the eyes are unfilled, leaving them transparent against the page background. The rendering relies entirely on raw SVG elements embedded in an HTML file, bypassing any dynamic computation. Although the page loads the React library via a script tag, the code uses no React components or APIs; it only logs the React object to the console before drawing the shapes.

BBilly Owire
94% match
Loading thumbnail…

Smiley face part 1

A yellow smiley face is drawn on a black-outlined SVG canvas. The face consists of a large yellow circle for the head and two smaller black circles for the eyes, all rendered using SVG `<circle>` elements. The visualization uses React and JavaScript, with the page structure defined in HTML. Although the code includes a script tag for React, the smiley face itself is drawn with static SVG markup, not through React components.

IitsAniketNow
94% match
Loading thumbnail…

Smiley Face Part1

A yellow, black-outlined smiley face is drawn on a blank SVG canvas, with two solid black circles serving as eyes and the large yellow circle as the face itself. The example demonstrates how React is loaded but unused, as the rendering is achieved purely through static SVG elements defined directly in the HTML. It uses the React 18 UMD production library and vanilla SVG circle elements, with coordinates and stroke widths set explicitly to position the face and eyes.

Bbhavani44
94% match
Loading thumbnail…

Smiley Face part 1

A yellow smiley face is drawn on an SVG canvas, with two black circles representing eyes and a single outline for the face. The example demonstrates static SVG rendering within a React application, using React 18.2.0 and ReactDOM to mount a separate JSX element to the page root. The SVG markup is hardcoded directly in the HTML file, while the React component renders a simple “Hello JSX” heading independently, showing how both coexist.

SStefan Du Plessis
93% match
Loading thumbnail…

Smiley face part I

A large yellow circle outlined in black forms the basic head of a smiley face on an SVG canvas. Two small black circles serve as the eyes, positioned symmetrically on either side of the head's center. The example renders static SVG shapes directly in HTML, using React’s production build for setup, though the drawing itself relies on native SVG circle elements without any interaction or animation.

JJV91
93% match
Loading thumbnail…

Smiley Face pt 1

This example shows a simple yellow smiley face drawn on a fixed 960-by-500 SVG canvas, with two black circles serving as eyes and a larger yellow circle as the face outline. The code uses plain SVG elements (`circle` with `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width`) embedded directly in the HTML, alongside a React 17 UMD script that is imported via `index.js` but only logs the React object to the console. The rendering approach is static SVG, with no dynamic data or interaction.

Qquintonio1000
93% match
Loading thumbnail…

Smiley Face Part-1

A static smiley face is drawn with SVG shapes, featuring a large yellow circle for the head and two smaller black circles for eyes. The page uses React, though the visual is created directly in the HTML markup rather than through React components. React 16.9 and ReactDOM are loaded from a CDN, and the bundled JavaScript only renders a simple "Hello JSX" heading, leaving the SVG to display the graphic. The rendering approach relies on basic SVG circle elements with fixed coordinates and stroke styling.

RRigved Epur
93% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, centered within an SVG canvas. Two smaller black circles positioned on the upper half serve as eyes, creating a simple smiley face icon. The page is a minimal HTML document that uses raw SVG elements—`circle` tags with `cx`, `cy`, and `r` attributes—to draw the shapes, with CSS setting the body to fill the viewport. No JavaScript or external libraries are involved; the visualization relies entirely on static SVG markup.

HHoang Dang Khanh
93% match