Fork of HTML Starte

100%

Fork of HTML Starte

✓ Published0🌍 Public

Last edited Aug 5, 2022

Created on Aug 5, 2022

This example uses React to render two SVG circles, one large green circle with a black stroke and a smaller circle offset to the left, on a 960 by 500 canvas. The main circle’s radius is set by subtracting a hardcoded stroke width from the canvas height, though a typo in the stroke-width attribute leaves the circle without its intended border. The code loads React and ReactDOM from CDN, logs them to the console, and mounts the SVG to the root element.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a single circle rendered at the center of an SVG canvas using React. The code defines a React component that returns an SVG element with a fixed width and height, positioning the circle at coordinates calculated from those dimensions. It imports React and ReactDom, but does not yet mount the component to the DOM. The visualization uses SVG for rendering and demonstrates a minimal React setup for drawing shapes, with the circle’s radius and position hard-coded in JavaScript constants.

Rrahul887393@gmail.com

91% match

Loading thumbnail…

Fork of HTML Starter

This example displays a single, centered SVG circle on a 500 by 500 canvas, alongside a static HTML message. The page loads React 18 from a CDN but only uses it to log a console message; the visual output relies on raw SVG markup. Styling is handled with CSS, which centers the text and attempts to center the SVG element. The code demonstrates a minimal setup combining HTML, CSS, and JavaScript, with the SVG rendering showing a circle defined by a fixed radius.

ZzhehaowUNC

89% match

Loading thumbnail…

Fork of Hello HTML

This example shows a static SVG scene containing two circles, one large red circle with a black outline and two smaller unfilled circles positioned inside it. The page uses React and ReactDOM loaded from CDN, with the SVG elements defined directly in the HTML file. The accompanying JavaScript file imports React and ReactDOM but only logs the React object to the console, so no interactive behavior or data-driven rendering is present. The visualization is purely declarative markup inside an SVG viewport.

IIsaac Raskin

89% match

Loading thumbnail…

Fork of HTML Starter

This example shows a single large yellow circle centered in an SVG viewport with a black stroke, rendered at a fixed 940 by 500 pixel size. It is built with React 18 and ReactDOM, using JSX to define the SVG circle element directly in the component. The rendering relies on React’s `createElement` and `render` methods, with the SVG markup embedded inline. No data, interaction, or animation is present; it serves as a minimal starter template for SVG visualization using React.

Ggoldensage34

89% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple static SVG scene of two overlapping circles on a 900x500 canvas, with a large yellow ring and a smaller unfilled circle at its center. The page loads React from a CDN, though the React library is not utilized in the rendering logic. The visualization relies on raw SVG elements defined directly in the HTML, with basic styling applied via CSS to remove margins and hide overflow. A JavaScript console log statement executes when the page loads, but no interactive or animated behavior is present.

Ssuhaschitade

89% match

Loading thumbnail…

Fork of HTML Starter

This example renders two circles in an SVG canvas. A large yellow circle with a black stroke is drawn at the center, while a second, smaller circle is positioned to its left. The visualization demonstrates basic SVG shape creation using raw XML elements within an HTML file, relying on CSS for page layout and JavaScript not being used. The rendering approach is purely declarative SVG.

Wwajaale

89% match

Loading thumbnail…

Fork of HTML Starter

This example uses React to render three static SVG circles on a 960×500 canvas, composing a simple face-like illustration. The code loads React and ReactDOM from UMD bundles via unpkg, then uses JSX to define SVG elements with attributes like `cx`, `cy`, and `r` for positioning and sizing. The HTML page includes a `<style>` block (currently empty) and a `bundle.js` script reference, though no dynamic behavior or data is demonstrated—the visualization is purely declarative and static.

EEnes Gök

89% match

Loading thumbnail…

Fork of HTML Starter

This example shows a single large circle rendered at the center of an SVG canvas, creating a basic static visual. The circle is defined with a radius of 200 pixels and positioned at the midpoint of a 960 by 500 coordinate space. The display relies entirely on native SVG elements within the HTML markup, using no JavaScript or external data sources. The result is a minimal demonstration of how SVG shapes can be placed and styled directly in an HTML document.

Vvvs1680

89% match