Skip to main content
SimilarExport ZIP
100%

Fork of Hello HTML

✓ Published0🌍 Public
EEdward Chen
Last edited Jul 9, 2023
Created on Jul 6, 2023
Forked from Hello HTML

This example shows a simple static SVG smiley face rendered directly in React, with two empty circles as eyes and a larger yellow circle as the head. The HTML file loads React and ReactDOM from CDN, then uses plain JSX inside a script tag to define the SVG elements. It demonstrates how React can manage SVG markup without any additional visualization libraries, relying solely on ReactDOM to render the component tree into the page.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example displays a simple static SVG smiley face—a yellow circle with two black eyes—centered on a 960-by-500 canvas. It demonstrates basic React integration by using React 18 and ReactDOM to render a component into a root element, while the visual itself is drawn directly with SVG circle elements. The code mixes HTML markup, SVG attributes, and a minimal React script, with all styling handled by inline attributes and a small CSS rule. It does not show any interactive behavior or data-driven updates, only a fixed illustration.

Llefei1980
96% match
Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal React application that renders a static SVG smiley face, consisting of a yellow circle with two black eyes, inside an HTML page. The page loads React 18 and ReactDOM from unpkg CDNs, though the JavaScript file merely logs the React object to the console. The visualization uses inline SVG markup within the HTML, with a commented-out SVG block showing the intended graphic, and a containing div where the React app would mount. The design uses simple geometric shapes—circles with explicit coordinates, radii, and fill colors—to create the face.

NNikhil
95% match
Loading thumbnail…

Fork of Fork of Hello HTML

This example shows a static SVG smiley face drawn with two yellow and black circles, a nose, and a mouth, rendered alongside a React “Hello World” heading. The SVG uses hard-coded circle elements with fill, stroke, and stroke-width attributes to create the face. The page loads React 17 and ReactDOM from a CDN, while `index.js` uses `ReactDOM.render` to mount a simple `App` component. The SVG is placed directly in the HTML body rather than being generated by React.

AAsimali39
95% match
Loading thumbnail…

Fork of Hello HTML

This example renders a static SVG smiley face using React and raw HTML. The visualization displays a large yellow circle with black stroke as the face, two smaller black circles for eyes, and no visible mouth. The code creates the graphic through inline SVG elements embedded directly in the page body, with React imported but only logging to the console. The rendering approach relies on basic SVG shapes like `circle` rather than any data-driven logic or interaction.

MMMMRepa
95% match
Loading thumbnail…

Fork of Hello HTML

This example shows a simple SVG smiley face drawn on a yellow circle with black stroke, featuring two smaller circles for eyes. It serves as a minimal demonstration of embedding SVG elements directly within an HTML page alongside React. The code uses React and ReactDOM from external UMD scripts, while the face itself is rendered with raw SVG tags rather than React components. The page loads a bundle.js file and uses standard SVG circle elements positioned at fixed coordinates, with the body styling removing margins and hiding overflow.

Jjasandison
95% match
Loading thumbnail…

Fork of Hello HTML

This example displays a simple, static smiley face composed of three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The React library is loaded via a UMD script and imported in JavaScript, though the visualization itself is hardcoded directly in the HTML markup rather than generated through React components. The page renders the graphic using inline SVG elements, with the body styled to remove margins and hide overflow.

Ssking8484
94% match
Loading thumbnail…

Fork of HTML Starter

This example shows a simple smiley face rendered as a static SVG graphic using React. The drawing consists of three circles: a large yellow circle for the face and two smaller black circles for the eyes, all placed within a 960 by 500 pixel SVG canvas. The code uses React and ReactDOM to render the SVG elements, with styles defined in CSS. The visualization demonstrates basic React component structure and declarative SVG circle creation without any interactive or data-driven behavior.

FFlorian Maas
94% match
Loading thumbnail…

Fork of Hello HTML

A static SVG smiley face is rendered on a yellow circle with black eyes and a thick outline. The example demonstrates a minimal React setup by importing React and ReactDOM from CDN scripts, though it logs the React object to the console without using React components. The visualization relies on raw SVG elements—`<circle>` shapes for the face and eyes—defined directly in the HTML body, with styling applied via inline attributes. The code includes a YouTube embed and a basic HTML page structure, showcasing a simple, non-interactive fork of an introductory HTML example.

GGymTanOptimal
94% match