Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Aug 7, 2021

Created on Aug 7, 2021

This example renders a single yellow circle centered on an SVG canvas. The circle uses a fixed radius, a black stroke, and a yellow fill, with the canvas dimensions hardcoded at 960 by 500 pixels. The visualization is built with React and ReactDOM, using JSX to declare the SVG `<circle>` element, while the page itself loads React from a CDN in the HTML file.

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 yellow circle with a black outline centered in an SVG canvas. The visualization is built with React and rendered as SVG, using the `ReactDOM` API to mount the component. The circle is drawn with a radius of 245 pixels on a 960 by 500 canvas, demonstrating basic SVG shapes and styling within a React framework. The code imports React and ReactDOM, and the package includes D3 as a dependency, though no D3 functions are used here.

DDusty White

95% match

Loading thumbnail…

Fork of HTML Starter

This example shows a single yellow circle centered on a 960x500 SVG canvas, with a black outline and a stroke width of 10 pixels. The circle is positioned at coordinates (480, 250) with a radius of 200, demonstrating basic SVG shape rendering within an HTML page. The visualization uses plain SVG elements and CSS styling, with the `index.html` file containing the markup directly. The `README.md` references the React Starter as a related example, but this version uses no JavaScript libraries or frameworks, relying solely on static SVG markup.

AAleex94

95% match

Loading thumbnail…

Fork of HTML Starter

This example renders a single yellow circle with a black stroke on an SVG canvas, centered against a plain white background. It uses inline CSS to control page layout and SVG elements directly in the HTML to define the circle’s position, radius, and colors. The page serves as a minimal demonstration of combining HTML, CSS, and JavaScript for basic graphics. No external libraries or data sources are used; the visualization is purely static.

BBin

94% match

Loading thumbnail…

Fork of HTML Starter

This example shows a single yellow circle with an orange stroke centered on an SVG canvas. The code uses plain SVG elements—specifically a `<circle>` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—rendered at a fixed 960 by 500 pixel size. It also includes inline CSS that removes page margins and hides overflow, plus a JavaScript `console.log` statement for debugging in the developer tools. The visualization demonstrates a minimal HTML page combining SVG drawing with basic styling and scripting, without relying on any external libraries or data sources.

Ssethduckens

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

93% match

Loading thumbnail…

Fork of HTML Starter

This example displays a single yellow circle with a black stroke centered on a 960 by 500 SVG canvas. It uses native SVG elements within an HTML page, with inline CSS to remove page margins and hide overflow. The circle’s position and radius are set explicitly, though the code includes a typo in the `stroke` attribute. It demonstrates a minimal setup for rendering vector graphics in the browser.

JJorge A. Lima

93% match

Loading thumbnail…

Fork of HTML Starter

This example displays a single yellow circle with a black outline at the center of an SVG canvas. The page uses raw HTML, CSS, and JavaScript, with the circle defined directly in the SVG markup. The CSS sets the body margin to zero and hides overflow, while the SVG specifies a width of 960 pixels and height of 500 pixels. No external libraries are used; it is a bare-bones starter template for creating SVG-based visualizations.

MMatt

93% match

Loading thumbnail…

Fork of Hello HTML

This example renders a single yellow circle with a black stroke at the center of an SVG canvas. The visualization is built with React 17 and ReactDOM, which render the SVG markup directly to the page. The circle is defined with a radius of 245 and positioned at coordinates 480, 250, using the SVG `circle` element with fill and stroke properties. The code demonstrates a minimal React setup where the application is mounted to a root div, producing the static graphic without any interaction or data-driven updates.

JJoseJuniorTK

93% match