Skip to main content
SimilarExport ZIP
100%

Smiley Face Part I

✓ Published0🌍 Public
KKvvadzo
Last edited Jun 27, 2022
Created on Jun 15, 2022
Forked from Hello HTML

This example draws a simple smiley face inside an SVG canvas. It shows a large yellow circle with a black outline, containing two smaller black circles as eyes. The code uses raw SVG elements—`<svg>`, `<circle>`, and their `cx`, `cy`, `r`, `fill`, and `stroke` attributes—to define the shapes directly in the HTML file. It also loads React via a UMD script tag but does not use any React components or API calls; the visualization is pure declarative SVG markup. The face is centered on a 960 by 500 canvas with no interactivity or animation.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part I

This example uses raw SVG to draw a simple smiley face. It presents a yellow circle as the face, with two smaller black circles for eyes and a green circle in the center, all positioned within an SVG canvas. The code creates the shape directly in the index.html file using SVG elements and CSS for basic page styling. React is listed as the framework, but the rendering relies on static SVG markup without any JavaScript computations or data binding.

VVíctor Sánchez
95% 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
95% match
Loading thumbnail…

Smiley Face part 1

This example draws a simple smiley face using three SVG circles: a large orange circle for the head and two smaller black circles for the eyes. The circles are positioned with fixed coordinates on a 900×500 SVG canvas, with the head centered at (480, 250) and a radius of 240. The page loads React 17 from a CDN, though the code does not use React components—it renders directly through static SVG elements in the HTML. The inline styles set the body margin to zero and hide overflow, while the accompanying index.js only logs a message to the console.

Ssinghvipin
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 1

This example shows a simple smiley face constructed from three SVG circles on a yellow background. The face is drawn using raw SVG elements, with a large yellow circle for the head and two smaller black circles for the eyes, all placed within a 960 by 500 viewport. The code uses React 18.2.0, loaded via a UMD script tag, and renders the shapes directly in the SVG markup. A separate JavaScript file imports React and logs it to the console, though it doesn't add any interactive behavior.

PPhan Nguyen
94% match
Loading thumbnail…

Smiley Face Part 1

This example renders a simple smiley face using SVG primitives. The code directly creates three circle shapes, a large yellow face with a black stroke, and two smaller black circles for eyes, all positioned on a static 960 by 500 canvas. The implementation relies on raw SVG elements embedded in an HTML document, with the overall styling controlled by a small CSS block that removes margin and hides overflow. There is no interactivity or data source; the visualization is solely composed of hard-coded coordinates and attributes. This demonstrates the fundamental use of SVG shapes and basic styling without any JavaScript or charting libraries.

DDylan Doucet
94% match
Loading thumbnail…

Smiley Face Part 1

This example shows a simple yellow smiley face, built with two black-outlined circles as eyes and a large circular face, all rendered as SVG shapes. The face is centered on a 960 by 500 canvas, with the main circle’s radius calculated from the canvas height and stroke width. The code uses React with ReactDOM to define and output SVG elements, and the `index.html` file includes a script that logs React to the console. The visualization is static, displaying only the face and eyes without a mouth.

WWanling1010
94% match
Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face drawn as a yellow circle with two black eyes and an empty space where a mouth will be added later. The code renders the SVG elements directly in the HTML file, setting the circle center, radius, and stroke properties. It uses React 17 with `react-dom` to mount the app, though the actual drawing lives outside the React component. The SVG viewport is 960 by 500 units, and the face uses basic geometric shapes without any data-driven visualization or interactive features.

BBobby Bowes
94% match