Skip to main content
SimilarExport ZIP
100%

Hello HTML

✓ Published0🌍 Public
Ffath0mm
Last edited Feb 16, 2022
Created on Feb 12, 2022
Forked from HTML Starter

A yellow circle with a black stroke is rendered centered on a 960 by 500 SVG canvas. Built with React and ReactDOM, the example demonstrates a minimal component structure where JSX defines the SVG circle element, with coordinates calculated from the viewport dimensions. The code includes commented-out additional circles, suggesting a template for extending the visualization.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

A React application renders a single yellow circle with a black outline at the center of an SVG canvas. The circle is positioned using fixed width and height dimensions of 960 by 500 pixels, with its center calculated from those values. ReactDOM renders the App component into a root div, while the SVG element defines the circle's radius, fill, stroke, and stroke-width attributes directly. The example demonstrates minimal setup using React 17 and SVG without any external data or interaction.

KKasidisGit
92% match
Loading thumbnail…

Hello HTML

A single yellow circle with a thick black stroke fills the center of an SVG canvas. Built with React 18.2, the component renders a 960×500 pixel viewport using hard-coded coordinates and radius values from the `App` function. The page imports React and ReactDOM via CDN and mounts the SVG to a root div, while an embedded YouTube video demonstrates the setup. The example shows the minimal structure needed to combine React’s declarative rendering with SVG for basic data visualization shapes.

Nnofferdahl
92% match
Loading thumbnail…

Hello HTML

This example renders a single yellow circle centered on an SVG canvas using React 17 and the ReactDOM API. The circle is defined directly in JSX within a React component, with attributes specifying its position, radius, stroke, and fill color. The app mounts to a div element with the ID "root" via the `ReactDOM.render` method, demonstrating a minimal setup for combining React with SVG rendering in an HTML page.

VVahe Abovyan
92% match
Loading thumbnail…

Hello HTML

This example shows a simple, single yellow circle with a black stroke, rendered at the center of an SVG canvas. The React application uses `ReactDOM.render` to place the circle directly, bypassing the commented-out static SVG markup in the HTML file. It relies on the React and ReactDOM libraries, and the drawing itself is created with SVG `<circle>` elements. The code focuses on a minimal demonstration of React rendering to an SVG container.

Mmanepall1
91% match
Loading thumbnail…

Hello HTML

This example shows a single yellow circle rendered on a black-bordered SVG canvas, demonstrating a minimal HTML page with embedded CSS and JavaScript. The SVG element is set to 960 by 500 pixels, with the circle centered at (480, 250) and a radius of 245. The page uses plain HTML, CSS for margin and overflow styling, and no external libraries—only native SVG tags such as `<circle>` and attributes like `fill`, `stroke`, and `stroke-width`. The rendering approach is direct SVG markup, with no data source or dynamic behavior beyond static visual output.

Aanamariacv
91% match
Loading thumbnail…

Hello HTML

This example displays a single yellow circle centered on a 960 by 500 SVG canvas. The HTML page uses inline CSS to remove the default margin and hide overflow. A plain SVG element is drawn directly in the markup, with the circle’s position and radius set as static attributes. No JavaScript or external libraries are used, relying solely on native SVG rendering within the browser.

Hhukbk
91% match
Loading thumbnail…

Hello HTML

A simple yellow circle drawn as an SVG element at the center of a 960 by 500 canvas, with a black outline and a fixed stroke width. The visualization is rendered using React, with the component tree constructed through JSX and mounted via `ReactDOM.render`. The project includes an unedited commented-out version of the smile face, while the active code displays only the base circle shape.

Zzhchm777
90% match
Loading thumbnail…

Hello HTML

A minimal React page displays a large yellow circle with a black stroke over an SVG canvas, accompanied by two smaller black circles positioned inside it. The components are drawn directly in the SVG markup, while React and ReactDOM are loaded from CDN scripts. The page also includes a broken script tag and a YouTube embed link in its README, though these do not affect the rendered output. The visualization demonstrates basic SVG shapes within an HTML document without any interactive behavior or data binding.

Aagreenyy
90% match