Skip to main content
SimilarExport ZIP
100%

HTML + CSS

✓ Published0🌍 Public
Rrbaliwal00
Last edited Nov 28, 2023
Created on Nov 28, 2023
Forked from HTML Starter

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.

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

This example shows a static yellow circle with a black outline and two smaller unfilled circles, resembling a simple face, rendered directly in SVG. It demonstrates minimal HTML and React integration: the page loads React and ReactDOM from a CDN, then draws the SVG shapes inline, while a separate script logs the React object to the console. The code includes an unused React component that renders “Hello JSX” via `ReactDOM.render`, though it is not displayed on the page.

Ffuatio
89% match
Loading thumbnail…

Hello HTML

A minimal HTML page renders a single yellow circle with a black stroke on a 960 by 500 SVG canvas. Using plain SVG elements, the example demonstrates how CSS sets the body margin and overflow, while JavaScript is referenced but not employed. The code highlights a bare-bones integration of HTML, CSS, and SVG without any external libraries, serving as a foundational illustration for a React starter project.

Eechelonone
89% match
Loading thumbnail…

Hello HTML

This example presents a minimal web page displaying a static SVG circle. The visualization uses a yellow circle with a thick black stroke, centered on an 960x500 canvas. The code demonstrates the integration of React into a plain HTML document by loading the React library via a CDN script tag. The `bundle.js` script loads and executes the JavaScript, which imports React and logs it to the console. The SVG markup defines the circle’s geometry and styling, while the CSS resets the body margin and hides overflow.

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

Hello HTML

A minimal web page shows a large yellow circle with a black outline, accompanied by two smaller black circles, rendered as static SVG shapes. The example combines a React application, which displays a simple "hello" heading, with hand-written SVG markup that draws the circular figures directly in the HTML document. The React libraries manage the heading output, while the SVG elements define the visual composition without any interactive or animated behavior.

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

Hey HTML

This example shows a minimal SVG scene: a yellow circle outlined in black, with a smaller black circle inside it, centered on a 960 by 500 canvas. It demonstrates how to combine React with raw SVG elements in an HTML page. The code loads React via a CDN script and uses inline SVG tags like `<circle>` and attributes such as `cx`, `cy`, `r`, and `fill` to draw the shapes. No data is involved; the focus is on the simplest possible integration of React with the DOM and SVG.

HHasan "Hasi" Öztutar
88% match
Loading thumbnail…

Hello html

This example renders a simple, static SVG scene of a yellow circle with a black outline and two smaller unfilled circles representing eyes. The React-based application uses JavaScript to define dimensions and stroke properties, passing them into the SVG element. The code loads React and ReactDOM from CDN and renders the graphic into a root div, demonstrating a minimal setup for SVG visualization with React.

Ssukhmani0117
88% match