Skip to main content
SimilarExport ZIP
100%

Smiley Circle Part I

✓ Published0🌍 Public
CConrad F D'Cruz
Last edited Aug 22, 2021
Created on Aug 22, 2021
Forked from HTML Starter

This example displays a simple smiley face drawn with three SVG circles on a yellow background. The main circle forms the face, while two smaller circles serve as eyes. The visualization uses React 17, loaded via UMD, and renders entirely through declarative SVG elements within an HTML page. The face is centered in a 960 by 500 viewport, with the body styled for large text display. No interactive behavior or data binding is implemented; the graphic is static, defined directly in the markup.

AI-generated description

A bare minimum Smiley Face Part 1 HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part I

This example depicts a partial smiley face using three SVG circles: a large yellow circle with a black outline, and two smaller circles placed inside it to represent eyes. The visualization is implemented through inline SVG markup within an HTML file, with the React library loaded but not yet actively used in the rendering logic. The circles are positioned using explicit `cx`, `cy`, and `r` attributes, with the main face centered on a 960×500 canvas. The structure suggests a static composition, as no interactive or animated behavior is present in the code.

PPinzhi
95% match
Loading thumbnail…

Smiley face partI

This example shows a simple yellow smiley face composed of three SVG circles: one large face and two smaller eyes, drawn on a 960x500 canvas. The visualization uses static React markup within an HTML page, with React and ReactDOM loaded from CDN. It relies on SVG circle elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, producing a minimal demonstration of declarative component rendering without interactivity or data input.

Mmario-iurlaro
95% match
Loading thumbnail…

Smiley face part 1

This example shows a simple yellow smiley face constructed from three SVG circles: a large filled circle for the head and two smaller circles for the eyes, all with a thick black stroke. The visualization is rendered as static SVG within an HTML page, with the face centered by hard-coded coordinates. It uses React and ReactDOM in the JavaScript, though the drawing itself is plain SVG markup in the `index.html` file rather than being generated programmatically.

Bboualichaimaa
95% match
Loading thumbnail…

Smiley face part 1

This example renders a simple smiley face using SVG circles. It shows a central yellow circle with a black outline, accompanied by two smaller black circles representing eyes, all positioned within a 960 by 500 canvas. The visualization is built with React, leveraging the `react` and `react-dom` libraries, and renders the graphic statically via inline SVG markup in the HTML file. The shape is defined declaratively through SVG elements with specified coordinates and radii, without any interactive or dynamic behaviors.

HHasheef Riyas
94% match
Loading thumbnail…

Smiley Face Part 1

This example displays a static smiley face rendered as three SVG circles: a large yellow face with a black outline and two smaller black circles for eyes. The visualization uses React 18 and ReactDOM to mount a simple “Hello JSX” app, while the face itself is drawn directly in the HTML markup with SVG circle elements, each specifying explicit cx, cy, and r attributes. The page includes CSS for centered text and hidden overflow, and loads the React libraries from CDN.

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

Smiley Face Part I

This example displays a static, yellow smiley face constructed from three SVG circles: a large filled circle for the head and two smaller circles for the eyes. It uses React 18 to render the interface, while the face itself is drawn directly in the HTML with inline SVG elements. The page loads React and ReactDOM from a CDN and includes a linked video about the project. The visualization demonstrates basic SVG shape creation without interactive behavior.

AAvichai Vazana
94% match
Loading thumbnail…

Smiley Face Part 1

This example shows a static arrangement of three circles forming a simple smiley face on an SVG canvas. The main yellow circle has a black outline, and two smaller black circles represent the eyes; there is no mouth drawn. The rendering is achieved with raw SVG elements inside an HTML page, while the code includes React and ReactDOM libraries loaded via UMD, though the visualization itself does not yet use React components or any dynamic behavior.

SSuvrat Garg
94% match