Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited May 20, 2022

Created on May 20, 2022

This example displays a static yellow circle centered on a 960 by 500 SVG canvas, with a React-based root element positioned above it. The page loads React 16.7.0 and ReactDOM from unpkg, then uses `createRoot` from ReactDOM to mount a JavaScript component into the `#root` div. The SVG circle is rendered directly in the HTML markup, independent of the React component. The visualization demonstrates a minimal setup for combining React’s component model with raw SVG rendering in a single page.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example displays a static yellow circle with a black outline centered on an SVG canvas, accompanied by two smaller unfilled circles positioned to its upper left and right. It demonstrates a minimal React-based rendering approach, using React 18 and ReactDOM to create the main SVG element, while the remaining shapes are hardcoded directly in the HTML. The page loads React via UMD bundles and renders the primary circle through a React component, with the SVG markup splitting between compiled JavaScript and raw markup.

Rrjw25

93% match

Loading thumbnail…

Fork of Hello HTML

This example shows a static SVG scene of a yellow circle with black outline and two smaller circles, alongside a React-rendered heading. The page loads React 18 and ReactDOM 17 via UMD scripts, then uses `ReactDOM.render` to insert JSX into a root div. The SVG circles are drawn directly in the HTML, with hardcoded coordinates and styles. The code demonstrates basic SVG markup combined with React’s declarative rendering, though the SVG elements are not generated through React components.

PPGC-2557

93% match

Loading thumbnail…

Fork of Hello HTML

This example displays a simple yellow circle with two smaller black circles—a schematic face—rendered as static SVG elements on a 960x500 canvas. It pairs this hand-authored SVG with a React app that logs the React library to the console and attempts to render a "Hello JSX" heading via `ReactDOM.render`, though the component returns nothing. The code loads React 18.2.0 from a CDN and uses plain SVG circle elements, not D3 or other visualization libraries, highlighting a minimal integration of React with SVG markup.

HHannah Heejeong Lim

92% match

Loading thumbnail…

Fork of Hello HTML

This example displays a single large yellow circle with a green stroke, centered on a 1000×1000 SVG canvas. It uses React 16.7.0 to render the circle, with the `ReactDOM.render` method mounting the component into a root div. The SVG circle is defined using explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, and the code demonstrates a minimal React setup alongside an HTML page that loads React and ReactDOM from unpkg CDN links.

Kkumaaark

92% match

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal React setup that renders both a static SVG graphic and a dynamic JSX element. It shows a yellow circle with two smaller circles, drawn directly in the SVG markup alongside an `<h1>` tag that says "Hello JSX". The code imports React and ReactDOM, logs the ReactDOM object to the console, and uses `ReactDOM.render()` to mount a functional component into the `#root` div. The SVG is hardcoded in the HTML, while the React component handles text rendering.

MMatheus Coelho

92% match

Loading thumbnail…

Fork of Hello HTML

This example displays a simple yellow circle with a thick black outline and two smaller black circles positioned as eyes, rendered directly as SVG elements. The page also mounts a React application that logs the ReactDOM object and renders a heading reading "hello" into a root div. The code references React 18.2.0 from unpkg, though script tags contain typos for the source and bundle paths. The visualization is static, with no interactive behavior or data-driven components beyond the fixed geometric shapes.

Mmalveeka27

92% match

Loading thumbnail…

Fork of Hello HTML

This example displays a single yellow circle with a thick black outline, centered on an SVG canvas. The visualization is generated using React and ReactDOM, which render the SVG element directly into the page’s root div. The circle’s position and radius are calculated from fixed width and height constants, and the rendering relies solely on the SVG circle primitive without any data or interaction.

Wwordman2

92% match

Loading thumbnail…

Fork of HTML Starter

This example displays a yellow circle with two black circles, resembling a face, rendered as static SVG elements over a 960 by 500 canvas. The page also mounts a separate React component that renders a large "Hello" message into a root div using ReactDOM. The React production UMD builds are loaded from unpkg, while the SVG shapes are drawn directly in the markup. The code demonstrates a minimal integration of React 18 for DOM content alongside raw SVG for fixed visual elements.

GGeorge Tanev

92% match