Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
TTrustPaul
Last edited Nov 21, 2020
Created on Nov 21, 2020
Forked from HTML Starter

This example demonstrates a minimal React application that renders a single yellow circle with a black border on an SVG canvas. The circle is centered within a 960 by 500 pixel viewport using hardcoded coordinates. The code imports React and ReactDOM, defines a functional component that returns SVG markup, and mounts it to the root DOM element using `ReactDOM.render`. It loads React and ReactDOM from CDN UMD builds, with the component code transpiled into `bundle.js`.

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
89% match
Loading thumbnail…

HTML Starter

This example demonstrates a minimal setup for rendering an SVG circle using React and D3.js, with all styling defined in CSS within an HTML page. It shows a single circle positioned at a fixed coordinate inside a 500x500 SVG container, rendered by the ReactDOM `render` method. The code combines a React component definition in `index.js` with a static HTML file that loads React, ReactDOM, and D3 v6 from CDNs. The circle’s appearance is determined by default SVG styling, and the example serves as a bare-bones foundation for interactive visualization projects.

TTrustPaul
89% match
Loading thumbnail…

HTML Starter

This example demonstrates a minimalist HTML page that renders a simple SVG face composed of three circles—a yellow head with black outlines and two smaller circles for eyes—on a 960 by 500 canvas. The page uses plain HTML and CSS for layout and styling, while the JavaScript file, which imports React and ReactDOM, initializes a React StrictMode component, though the SVG itself is defined directly in the markup rather than through React. The visualization does not reference external data sources, instead showcasing static, hand-coded shapes.

JJunypyr
88% 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
88% match
Loading thumbnail…

Hello HTML!

This example demonstrates a minimal React application rendering a single yellow circle with a black outline as an SVG graphic. The code imports React and ReactDOM directly from UNPKG-hosted CDN libraries, defines a functional component that returns SVG markup, and mounts it into the page’s root element. It also includes a local ES6 module (`myMessage.js`) exporting a string, though that string is not displayed. The visualization serves as a simple introduction to combining React with SVG for declarative drawing.

Lleowrites
88% match
Loading thumbnail…

HTML Starter

This example demonstrates a minimal React and D3 visualization, rendering a yellow circle with a black outline and a single arc path positioned at the center of an SVG canvas. The code imports React, ReactDOM, and the `arc` function from D3, using it to create a quarter-circle path with inner and outer radii. The SVG is sized 960 by 500 pixels, with the circle and arc drawn via JSX elements and a `d3.arc()` generator. The visualization relies on React for DOM rendering and D3 v6 for geometric path computations.

TTrustPaul
88% match
Loading thumbnail…

Fork of HTML Starter

This example shows a simple yellow circle with two smaller black circles positioned inside it, forming a basic face-like shape on an SVG canvas. The code demonstrates a minimal React setup by loading the React library via a CDN and logging the React object to the console. It combines raw SVG elements with inline JavaScript, using React 17 and standard SVG circle attributes for rendering. The example serves as a starting point for exploring how React can coexist with static SVG markup in a bare HTML page.

Rrmanonl
88% match
Loading thumbnail…

HTML + CSS

This example demonstrates a minimal interactive web page that renders a single yellow circle with a black outline using SVG within a React application. The visualization is created through React's `ReactDOM.render` method, which injects the SVG component into the HTML `#root` element. The page incorporates inline CSS for base styling, ensuring the body has no margin and hides overflow. The code uses React 18.2.0 UMD libraries and a separate `styles.css` file, though no external data is loaded, focusing purely on static graphical output.

Rrbaliwal00
87% match