Skip to main content
SimilarExport ZIP
100%

Smiley Face-I

✓ Published0🌍 Public
Rrabinkmc
Last edited May 4, 2021
Created on May 4, 2021
Forked from Hello HTML

A static SVG smiley face appears on a yellow circle with a black outline, centered in a 960×500 viewport. The page loads React 17 and ReactDOM from a CDN, while the main `index.js` file defines a React component that renders a simple "Hello My world!" heading. However, the visible face is drawn directly in the HTML using an SVG `<circle>` element, not through React. The example demonstrates a minimal setup where HTML, SVG, and React coexist in a single page, with the actual smiley shape relying purely on static SVG markup.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

A yellow smiley face rendered as an SVG circle with two smaller black circles for eyes sits centered on a 960×500 canvas. The page loads React 16.9 and ReactDOM 17.0.2 from unpkg, though the visualization itself uses only raw SVG elements—`<circle>` tags with explicit `cx`, `cy`, and `r` attributes—rather than React components. A script tag logs “React” and `index.js` imports React and ReactDOM, but no interactive behavior or data binding is present. The example demonstrates a static, hand-coded SVG composition embedded in an HTML file.

HHuhej
95% match
Loading thumbnail…

SmileyFaceI

A static smiley face rendered as SVG shows a yellow circle with black outline and two smaller circles for eyes. The HTML page defines the graphic directly with hardcoded circle coordinates, while a separate React component in `index.js` merely displays "Hello JSX" using `ReactDOM.render`. The project uses React 16.7.0 from a CDN, but the visible face itself relies only on plain SVG elements without dynamic data or interaction.

EEric Van Horenbeeck
95% match
Loading thumbnail…

Smiley Face Part I

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.

XXinhuiyu Liu
94% match
Loading thumbnail…

Smiley Face Part I

A static yellow circle with a black stroke forms the face, while two smaller black circles serve as eyes, leaving the smile absent. The SVG is defined directly in the HTML, centered at 960×500 with coordinates computed from the viewport dimensions. The example integrates React and ReactDOM via CDN scripts, logging both to the console, though no React components render the graphic—the markup is plain SVG. This demonstrates a minimal hybrid setup where React loads alongside raw SVG markup.

Eedgardoisla
94% match
Loading thumbnail…

Smiley Face Part I

A static yellow circle with a black outline renders as a smiley face on an SVG canvas. The example demonstrates embedding React components within an SVG element, using React 16.13.1 and ReactDOM to mount a simple application. The circle is hardcoded with fixed coordinates and dimensions, while the React component renders only a "Hello React!" message, showing the separation between the SVG drawing and the React-managed DOM. The page includes minimal styling to remove margins and hide overflow.

SShiya
94% match
Loading thumbnail…

Smiley Face

This example displays a simple smiley face drawn with basic SVG shapes—a yellow circle for the face and two smaller black circles for the eyes—centered on a 960 by 500 canvas. The page loads React and ReactDOM via CDN, though the visible graphic is produced directly with static `<circle>` elements in SVG markup, not through React rendering. The file also includes a separate `index.js` that logs ReactDOM and renders a "Hello JSX" heading, indicating the framework setup but not affecting the displayed smiley image.

CChaseRogers1027
94% match
Loading thumbnail…

Smiley Face

A smiling face rendered as a static SVG graphic uses React 17 and ReactDOM to mount an app, though the visible face is drawn directly in the index.html file with hardcoded circle elements. The yellow outer circle, two black eye circles, and implied curved mouth are laid out with explicit pixel coordinates on a 960×500 canvas. The code does not implement any interaction or data-driven logic; it simply outputs a fixed, pre-defined facial composition.

JJasprado23
93% match
Loading thumbnail…

Smiley Face pt 1

A static SVG smiley face drawn with three circles shows a yellow face and two black eyes against a blank page. The example demonstrates basic React integration by loading the React production library via CDN and logging the React object from the entry script. The SVG markup is written directly in the HTML file, using circle elements with attributes for position, radius, fill, and stroke, while the accompanying JavaScript file only initializes the React import without rendering any components.

Bbkelner
93% match