Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Jul 26, 2022

Created on Jun 19, 2022

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.

AI-generated description

A bare minimum [HTML]

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

A lone yellow circle with a thick black border sits centered on a blank white canvas, rendered as an SVG element within a React application. The example demonstrates the basic structure for building visualizations with React, using ReactDOM to mount the component and JSX to define the SVG circle with fixed width and height attributes. It serves as a minimal template for starting SVG-based projects.

Vverystochastic

94% match

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

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

93% match

Loading thumbnail…

Fork of HTML Starter

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.

YYuqi Tang

93% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple static SVG scene: a large yellow circle centered on a 960x500 canvas, with a smaller black circle positioned near its upper edge. The code uses React 17 loaded from unpkg, logging the React object to the console. Rendering is done through raw SVG elements defined directly in the HTML, with basic CSS resetting the body margin. No interactivity or data-driven logic is present.

Sss-cmd

93% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple static SVG composition: a large yellow circle with a black outline, accompanied by two smaller unfilled circles positioned symmetrically inside it. The visualization demonstrates basic SVG shape rendering within an HTML page. The code uses an SVG element with explicit width and height attributes, styling circle elements with fill, stroke, and stroke-width properties. It imports React and ReactDom from the provided JavaScript file, though the rendering itself relies purely on raw SVG markup in the index.html file, not on React's component system.

MMd Alif

93% match

Loading thumbnail…

Fork of HTML Starter

An SVG rendering displays a large yellow circle with a black outline and a smaller black circle positioned inside it. The example uses raw HTML, CSS, and JavaScript without any external libraries, embedding the SVG markup directly within the page. The CSS sets a full-page overflow and defines a message class, while the SVG canvas is 960 by 500 pixels and centers the concentric circles.

AAsfak Husain

92% match

Loading thumbnail…

Fork of HTML Starter

This example shows a single large yellow circle centered on a beige SVG canvas. The circle has a black stroke and a thick border, rendered statically within an HTML page. The code uses basic SVG elements and CSS styling, with a `console.log` statement to demonstrate JavaScript execution in the browser’s developer tools. No external libraries or data sources are used.

Sshivuram

92% match