Skip to main content
SimilarExport ZIP
100%

Smiley Face Part II

✓ Published0🌍 Public
Hheweishz
Last edited Mar 15, 2021
Created on Mar 15, 2021
Forked from HTML Starter

This example shows a static scene of a yellow smiley face with two black eyes, drawn as SVG circles. The code renders a placeholder React component with the text “hello” instead of the commented-out SVG markup. It uses React and ReactDOM to mount the app into the `#root` div, with the SVG definition present only as an HTML comment. The styling sets the body margin to zero and hides overflow, while the JavaScript relies on the React production UMD bundles loaded from unpkg.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part II

This example shows a static yellow smiley face made of three SVG circles with a black outline and two dark eye circles. It demonstrates basic React setup alongside raw SVG markup, where the circles are drawn directly in the HTML. The code includes React and ReactDOM from CDN, but the visible visualization does not rely on React rendering; instead, it uses plain SVG circle elements with fixed coordinates and stroke properties. The index.js merely renders a simple "Hello JSX" heading, leaving the smiley face as the primary visual output.

Mmatthamm@yahoo.com
94% match
Loading thumbnail…

Smiley Face Part II

This example shows a static smiley face drawn as a yellow circle with black outlines and two dark eye circles, rendered in an SVG canvas. The face is built from three basic SVG circle elements: a large yellow head and two smaller eyes, all positioned using explicit pixel coordinates. React 16.9.0 is loaded via CDN and the markup is authored directly in JSX-like syntax within the HTML file, while the bundled JavaScript imports React and ReactDOM but does not apply additional dynamic behavior beyond the static geometric composition.

Ssummertonhsu
93% match
Loading thumbnail…

Smiley Face Part II

This example shows a partial smiley face rendered as static SVG shapes: a yellow circle with a black outline and two unfilled circles for eyes, leaving the mouth absent. Built with React and ReactDOM, the code defines the SVG elements declaratively inside a React component and renders them into the DOM via `ReactDOM.render`. The SVG markup uses standard `circle` elements with explicit `cx`, `cy`, and `r` attributes, and the example imports React and ReactDOM from specific library versions.

GGowtham Viswanath K
93% 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
93% match
Loading thumbnail…

Smiley Face - Part II

A yellow smiley face rendered as a React SVG component uses ReactDOM to mount a static graphic. The code draws a large yellow circle with a black stroke, and two smaller black circles for eyes, positioned symmetrically around the center using hardcoded offsets. It demonstrates declarative SVG creation with React, replacing the commented-out plain HTML version.

Aamandaweisbrod18@gmail.com
92% match
Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face rendered as a simple SVG graphic. The face consists of three circles: a large yellow circle for the head and two smaller black circles for the eyes, all drawn directly in the HTML markup. The code uses React 16.9.0 and ReactDOM to mount a separate “Hello JSX” component, though the smiley face itself is plain SVG without React involvement. The rendering approach relies on explicit SVG attributes for positioning and styling, with a viewport of 960 by 500 pixels.

Bbartlomiejkoszek
92% match
Loading thumbnail…

Smiley face part 1

This example renders a simple yellow smiley face as an SVG graphic, showing a circle with a black stroke and two smaller unfilled circles for eyes. The code uses React with ReactDOM to mount an app into a root div, though the current JavaScript only displays "Hello JSX" and does not yet draw the face. The SVG markup is present as commented-out code, indicating an intended setup with a 960x500 viewport and calculated coordinates for the face elements. The rendering relies on React 17 production builds loaded from unpkg.

KKellin00
92% match
Loading thumbnail…

Smiley Face Part I

This example creates a static yellow smiley face with black-outlined eyes and an implied mouth, rendered as SVG circles inside an HTML document. The face is centered on a 960 by 500 canvas, with two filled circles positioned as eyes and a large yellow circle serving as the head. React and ReactDOM are loaded via CDN, but the visible drawing is plain SVG markup. The accompanying `index.js` file renders a simple "Hello JSX" heading, showing the setup for a React component that is not yet integrated with the SVG face.

Mmatthamm@yahoo.com
92% match