Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Dec 18, 2021

Created on Dec 18, 2021

This example displays a simple SVG drawing of a yellow circle with a black outline and two smaller circles positioned inside it, rendered on a 960 by 500 canvas. The code uses plain HTML, CSS, and JavaScript, with the page structure defined in `index.html` and React loaded via a UMD script from unpkg. The SVG shapes are drawn directly in the markup, with the main circle’s fill, stroke, and stroke width set inline. The `index.js` file imports React and ReactDOM but only logs the React object to the console, indicating the visual output relies solely on static SVG elements rather than dynamic React behavior.

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

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

93% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple yellow circle with a black outline centered on an SVG canvas, flanked by two smaller black circles representing a stylized face. The page is a bare-bones HTML document that loads React 16.7.0 from a CDN but does not use any React components or methods. Instead, it relies on plain SVG elements—circle, cx, cy, r, fill, and stroke—to render the shapes, while CSS classes control font styling for an empty message area. The rendering approach is direct, static SVG without data binding or interaction.

JJake

93% 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 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 displays a yellow circle with two black circles, resembling a face, rendered as static SVG elements over a 960 by 500 canvas. The page also mounts a separate React component that renders a large "Hello" message into a root div using ReactDOM. The React production UMD builds are loaded from unpkg, while the SVG shapes are drawn directly in the markup. The code demonstrates a minimal integration of React 18 for DOM content alongside raw SVG for fixed visual elements.

GGeorge Tanev

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

This example shows a simple yellow circle with two black eyes, resembling a basic face, rendered on a 960 by 500 pixel SVG canvas within an HTML page. The drawing uses raw SVG elements—a central `<circle>` for the face and two smaller `<circle>` elements for the eyes—with hard-coded coordinates and styling via CSS. The page loads the React 18.2.0 UMD libraries and includes a JavaScript file that logs the `ReactDom` object, demonstrating a minimal setup for integrating React with static SVG graphics.

Kkousikgvs

93% match