Skip to main content
SimilarExport ZIP
100%

Smiley Face P1

✓ Published0🌍 Public
LLareoSmith
Last edited Feb 28, 2021
Created on Feb 28, 2021
Forked from HTML Starter

This example renders a simple smiley face using an SVG within a single HTML page. It draws three circles: a large yellow circle with a black stroke forms the head, while two smaller solid black circles create the eyes. The page uses a minimal CSS setup to remove default margins and loads React, though the graphic itself is created entirely with static SVG elements and does not use any React components or JavaScript logic.

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 p1

A static SVG rendering of a smiley face, drawn with three black-outlined circles: a large yellow circle for the head and two smaller black circles for the eyes. The code defines the SVG markup directly in an HTML page, using React to load the production library from a CDN but not actually instantiating any React components or rendering dynamic content. The face is centered on a 960 by 500 canvas with a hidden overflow body margin.

EEngineerRajeev
94% match
Loading thumbnail…

Smiley Face 1

This example displays a simple smiley face made of three SVG circles: one large yellow circle for the face and two smaller black circles for the eyes. The shapes are drawn directly in the HTML markup with hardcoded coordinates and styling. React is loaded from a CDN in the page, though the code only logs the React object to the browser console and does not use it for rendering. The SVG canvas is set to 960 by 500 pixels, with the face centered horizontally.

Rrmanonl
94% match
Loading thumbnail…

Smiley Face: Part 1

This example renders a static smiley face using SVG primitives. A large yellow circle with a black outline forms the head, while two smaller black circles serve as eyes. The visualization is built with basic SVG elements—`<circle>` tags for the shapes—directly inside an HTML file. Although the page includes React via a CDN script, the drawing itself does not use React or any JavaScript to construct the graphics; it remains a purely declarative SVG composition.

Ttmadara88
93% match
Loading thumbnail…

Smiley face Part 1

This example displays a static smiley face constructed from three SVG circles: a large yellow face with a black outline and two smaller black circles for eyes, rendered on a 960 by 500 canvas. The drawing is implemented directly in the index.html markup using basic SVG elements, including circle tags with explicit coordinates and stroke attributes. Although the page loads React and ReactDOM libraries, the code does not utilize them for the visualization itself; the bundled JavaScript is minimal. The face is centered horizontally and vertically, with the eyes positioned symmetrically around the center point.

FFlore
93% match
Loading thumbnail…

Smiley face part 1

This example displays a static SVG smiley face constructed from three circles: a large yellow circle with a black stroke for the head and two smaller black circles for the eyes. The code renders the graphic by embedding the SVG markup directly in an HTML page, using raw SVG elements like `<circle>`. Although the page references React and includes a JavaScript file that imports the React library, no React components or rendering logic are actually used to generate the visualization, as the graphic is defined purely in static markup.

QQuino Terceño
93% match
Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face built from three SVG circles: a large yellow face, and two smaller black eyes. The face is rendered using React 17 and SVG elements defined directly in the HTML, with the React library loaded via CDN. It demonstrates basic SVG circle positioning and styling within a fixed 960 by 500 coordinate system. The code includes minimal React setup, though the rendered output does not depend on React’s rendering logic for the visible drawing.

Qqueens-lab
93% match
Loading thumbnail…

Smiley Face Pt 1

This example shows a simple smiley face drawn as a static SVG graphic: a yellow circle with a black outline, two black eye circles, and no mouth. The visualization uses plain SVG elements—three `<circle>` tags—embedded directly in an HTML page with CSS to remove the default margin and hide overflow. It demonstrates basic SVG rendering with React, using inline coordinates and attributes for positioning, sizing, and styling. No interactivity or data binding is present; the face is purely declarative markup.

MMatthew Heywood
93% match
Loading thumbnail…

Smiley face

This example draws a simple smiley face using only SVG primitives in a React-free HTML page, though the listing notes React as a possible framework for the v3 source. The face consists of three circles: a large yellow head with a black outline and two smaller black circles for eyes, all positioned within an SVG canvas. The code relies on standard SVG elements like `<circle>` and CSS styles for the page layout, with no data binding or interactivity. It demonstrates basic declarative vector graphics rendering in the browser.

Jjamlicker
93% match