Skip to main content
SimilarExport ZIP
100%

Smiley Face Part 1

✓ Published0🌍 Public
Aastr0cyt3
Last edited Sep 19, 2021
Created on Sep 18, 2021
Forked from Hello HTML

A smiling face is drawn in SVG with a large yellow circle for the head, two smaller black circles for eyes, and an incomplete mouth. The page combines static SVG markup with a React app that renders a separate "Hello JSX" heading via `ReactDOM.render`. The example uses React 17 production UMD builds and plain SVG elements like `circle` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, demonstrating basic shape composition without interactive behavior.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part One

This example renders a static smiley face using React 17 and SVG. It draws three circles on an SVG canvas: a large yellow head with a black outline, and two smaller black eyes positioned symmetrically around the center. The code defines the SVG markup directly in the HTML file, while the React app simply renders a placeholder “Hello JSX” heading. The visual output does not yet include a mouth, reflecting the “half way” status noted in the README.

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

A yellow circle with a black outline represents a smiley face, containing two smaller black circles as eyes. The example demonstrates basic SVG rendering within a React application, using hardcoded SVG circle elements positioned via `cx` and `cy` attributes. The page loads React from a UMD build and logs "Hello JavaScript" to the console. The visualization is static, with no interactivity or animation, serving as a simple introduction to combining React with SVG markup.

995shavinda
95% match
Loading thumbnail…

Smiley Face Part 1

This example shows a static smiley face composed of a large yellow circle with a black stroke, plus two smaller black circles for eyes, positioned against a minimal white background. The face is rendered directly in SVG markup within the HTML page, while a separate React app, using `ReactDOM.render`, attempts to display a simple “Hello JSX” heading. However, the React code is incomplete and does not return valid JSX, so the visible smiley face comes solely from the inline SVG elements, not from any React-generated output.

JJulia Kho
95% match
Loading thumbnail…

Smiley Face part 1

A smiling face is drawn with three SVG circles on a yellow background. The code uses raw SVG elements within an HTML file, rendering a large yellow circle for the face and two smaller black circles for the eyes. Included in the same page, a React app renders a simple “Hello JSX” message using the React and ReactDOM libraries, though the face itself does not rely on React for its display.

MManjunath Korisetru
95% match
Loading thumbnail…

Smiley Face Part 1

This example shows a static smiley face drawn with three SVG circles: a large yellow circle for the head and two smaller black circles for eyes, all positioned within a 960 by 500 pixel viewport. The HTML file defines the SVG elements directly in markup, while the React files contain only a minimal “Hello JSX” component that is not rendered. The face itself is created using basic SVG attributes like `cx`, `cy`, `r`, and `stroke-width`, with React 18 and ReactDOM loaded via CDN but not actively used for the visualization.

Wwjnaramore
95% match
Loading thumbnail…

Smily Face Part 1

A simple static SVG rendering depicts a yellow circle with two smaller black circles for eyes, forming a smiley face on a plain background. The example uses React to structure the page, with the face defined directly in JSX inside the HTML file. The SVG `circle` elements are hard-coded with fixed coordinates, while the `index.js` file initializes a React app that renders a separate "Hello JSX" header, though this header is not visible in the displayed output.

Ssyhna
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