Skip to main content
SimilarExport ZIP
100%

Smiley Face Part I

✓ Published0🌍 Public
XXinhuiyu Liu
Last edited Aug 19, 2022
Created on Aug 18, 2022
Forked from Hello HTML

A static yellow smiley face rendered as three SVG circles—a large head and two smaller eyes—appears on a 960-by-500 canvas. The page loads React and ReactDOM from a CDN, though the visible drawing is plain SVG markup in the HTML, not React-generated. The code includes a minimal `index.js` that imports React but does not render any component, so the smiley face is purely declarative SVG without interactive behavior.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Part 1

A page displays a static yellow smiley face in an SVG canvas, composed of three black circles for eyes and a large yellow circle with a black outline for the face. The example uses the React library, loaded via a UMD script, alongside a raw SVG circle element rendered directly in the HTML. The code also includes a separate `index.js` file that imports React and logs it to the console, though no interactive behavior is present. The simple sketch demonstrates basic React setup and SVG drawing without any data processing or dynamic updates.

Llai-james
95% match
Loading thumbnail…

Smiley Face Part 1

A static smiley face rendered as a yellow circle with two smaller black eyes sits centered within an SVG canvas. The graphic uses three raw SVG `circle` elements with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes to draw the face and eyes, while the page also imports React and ReactDOM, though the React code only renders a separate "Hello JSX" heading. The example demonstrates a minimal, framework-agnostic SVG drawing alongside a basic React setup in the same HTML file.

Zzepedrobessa
95% match
Loading thumbnail…

Smiley Face Part 1

A static SVG smiley face rendered with three circles: a large yellow head with a black stroke, and two smaller black eyes. The code uses raw SVG elements defined directly in the HTML, with CSS setting the page margin to zero and hiding overflow. React is part of the project metadata, but the example itself relies solely on SVG markup in the index file, with no JavaScript logic or data binding.

Cchshanmuk
95% 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
95% match
Loading thumbnail…

Smile Face Part I

A single yellow smiley face rendered as static SVG circles sits centered on a black-bordered canvas. The code draws the face using three circle elements: one large yellow circle for the head and two smaller black circles for the eyes, with no mouth or animation visible. It uses React 16.7.0, loaded via CDN, but only logs the React object to the console without applying any React components to the SVG. The example demonstrates a minimal hand-coded SVG composition within an HTML page.

DDanilo Eduardo
95% match
Loading thumbnail…

Smiley Face Part I

A static smiley face rendered as SVG elements: a yellow circle with a black outline, two smaller black circles for eyes, and no mouth. The example uses React 18 and ReactDOM to manage the SVG markup, though the page loads a compiled bundle with a typo in the script tag. The SVG has a fixed 960 by 500 viewport, with circles positioned using explicit `cx` and `cy` coordinates.

CCynthia Mengyuan Li
95% match
Loading thumbnail…

Smiley Face Part I

This example renders a static smiley face using SVG primitives within a React application. The face is constructed from three circles: a large yellow circle with a black stroke forms the head, while two smaller circles serve as eyes. The page is built with React 17, loaded via the UMD distribution, and ReactDOM, though the JavaScript file only logs the React objects. The SVG is hardcoded directly in the HTML file, with dimensions set to 960 by 500 pixels. No external data sources or interaction logic are present.

Gguohao77
95% match
Loading thumbnail…

Smiley Face Part I

A static smiley face rendered with SVG, composed of a yellow circle for the head and two black circles for the eyes. The code uses plain JavaScript embedded in an HTML page, making no use of React despite importing it in the separate `index.js` file, which only logs the React object. The SVG elements are positioned with explicit pixel coordinates (e.g., `cx="480"`, `cy="250"`) and styled via attributes like `fill` and `stroke-width`. The rendering relies directly on SVG’s native circle elements rather than a charting library.

MManfredChen
94% match