Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

This example shows a minimal React application that renders a simple greeting message alongside a static SVG smiley face. The SVG contains three circles—two smaller ones for eyes and a larger yellow circle with a black stroke for the head—drawn with fixed coordinates. The code uses React’s `createRoot` and `StrictMode` from `react-dom` to mount the `App` component. The SVG is embedded directly in the HTML body, bypassing React, while the `App` component outputs only the text headings via JSX.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple static smiley face rendered as an SVG, with two black eyes and a yellow circle outline. It uses React 18.3.1 via UMD builds from unpkg, logging the React object to the console and rendering an SVG graphic directly in the index.html file. The code demonstrates basic React setup with a root element and strict mode, though the App component is not fully defined, relying on the inline SVG for the visual output.

Hhiteshallakki98@gmail.com

93% 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

93% match

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

93% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow smiley face drawn as an SVG circle with two eye circles, rendered statically without interaction. The code uses React 17 to define an `App` component that returns SVG elements, with ReactDOM rendering it into the root HTML container. Dimensions and positions are computed via JavaScript variables for the face radius, center coordinates, stroke width, and eye offsets. The visualization demonstrates basic SVG circle shapes and React’s declarative JSX syntax for composing graphics, with no external data or dynamic behavior.

SShankar Ghimire

92% match

Loading thumbnail…

Fork of Hello HTML

This example renders a static smiley face using React 16.9 and ReactDOM 18.3, with three SVG circles drawn directly in the markup. The outer circle is filled yellow with a black stroke, while two smaller unfilled circles form the eyes. Although the index.js file defines an empty App component and calls ReactDOM.render on the root div, the visible output comes entirely from the inline SVG, not from React-rendered elements. The page uses production UMD builds of both React libraries and applies global CSS to remove margins and hide overflow.

AAmber Chou

92% match

Loading thumbnail…

Fork of Hello HTML

This example renders a simple SVG smiley face: two black-outlined yellow circles form a large head shape, while two smaller filled circles serve as eyes. It demonstrates a bare-bones React setup by loading React 17 from a CDN, although the SVG is plain static markup rather than generated through React components. The page logs “hello javascript” to the console and uses inline styles to remove body margins and hide overflow. Drawing relies solely on native SVG elements, with no D3 or charting library involved.

IIqbal Dzakwan I

92% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple smiley face drawn with SVG circles, and a React app that renders a “Hello JSX” heading. It demonstrates a minimal integration of React and SVG on a single page, with both elements present but separate. The code loads React and ReactDOM from CDN, uses `ReactDOM.render` to mount the React component, and defines the SVG graphic directly in the HTML. The SVG includes a large yellow circle with two smaller black-outlined circles, all styled with stroke widths to suggest a face.

Kkhuton

92% match