Fork of Fork of Hello HTML

100%

Fork of Fork of Hello HTML

✓ Published0🌍 Public

Last edited Jun 12, 2022

Created on Jun 12, 2022

This example shows two overlapping circles rendered as a static SVG scene, one yellow on the left and one red on the right, within a 960x500 viewport. It demonstrates a minimal setup for combining React with SVG markup, loading React and ReactDOM via CDN scripts and logging the React object to the console. The circles inherit default SVG styling, with the yellow circle having a black stroke, while the red circle lacks a stroke due to a typo in the `stroke-width` attribute. No dynamic data or interactivity is present; the visualization is purely declarative SVG structure.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example displays two static SVG circles—one yellow and one red—rendered directly in an HTML page. It demonstrates a minimal React setup by loading React 18 via UMD scripts and logging the React object to the console, though the circles themselves are plain SVG elements drawn without React components. The page includes a reference to an external JavaScript file and uses basic SVG circle attributes for positioning and styling. The visualization does not implement interactive behavior or data-driven updates, serving instead as a straightforward demonstration of HTML, SVG, and React integration in a bare-bones structure.

JJosepAnSabate

94% match

Loading thumbnail…

Fork of Hello HTML

This example shows a static SVG scene containing two circles, one large red circle with a black outline and two smaller unfilled circles positioned inside it. The page uses React and ReactDOM loaded from CDN, with the SVG elements defined directly in the HTML file. The accompanying JavaScript file imports React and ReactDOM but only logs the React object to the console, so no interactive behavior or data-driven rendering is present. The visualization is purely declarative markup inside an SVG viewport.

IIsaac Raskin

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

91% match

Loading thumbnail…

Fork of Hello HTML

This example renders two overlapping SVG circles, a yellow outer ring with a black stroke and a smaller black inner circle, positioned at the same center. The page also renders a React component that displays the text "H1" inside a root div. The visualization uses React 16.7.0 for component rendering, D3 v7.1.1 for SVG manipulation, and hardcoded circle attributes defined in CSS classes. The SVG output is static, with no interactivity or data binding beyond the fixed dimensions and styles.

GGaurav Dwivedi

90% match

Loading thumbnail…

Fork of Hello HTML

This example displays a static yellow circle with two smaller black circles positioned inside it, rendered as SVG shapes on an HTML page. The visualization uses raw SVG elements—circle tags with explicit radius, x- and y-coordinate attributes, and stroke styling—rather than any JavaScript-based data computation. The code imports React in index.js via bundle.js, though the rendering itself relies solely on declarative SVG markup embedded directly in the HTML file. No data source or dynamic behavior is present; the visualization simply demonstrates basic SVG shapes within a React project setup.

Ggraingames

90% match

Loading thumbnail…

Fork of Hello HTML

This example displays a simple yellow circle with two smaller black circles—a schematic face—rendered as static SVG elements on a 960x500 canvas. It pairs this hand-authored SVG with a React app that logs the React library to the console and attempts to render a "Hello JSX" heading via `ReactDOM.render`, though the component returns nothing. The code loads React 18.2.0 from a CDN and uses plain SVG circle elements, not D3 or other visualization libraries, highlighting a minimal integration of React with SVG markup.

HHannah Heejeong Lim

90% match

Loading thumbnail…

Fork of Hello HTML

This example displays a static yellow circle with a black outline centered on an SVG canvas, accompanied by two smaller unfilled circles positioned to its upper left and right. It demonstrates a minimal React-based rendering approach, using React 18 and ReactDOM to create the main SVG element, while the remaining shapes are hardcoded directly in the HTML. The page loads React via UMD bundles and renders the primary circle through a React component, with the SVG markup splitting between compiled JavaScript and raw markup.

Rrjw25

90% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple static SVG scene of two overlapping circles on a 900x500 canvas, with a large yellow ring and a smaller unfilled circle at its center. The page loads React from a CDN, though the React library is not utilized in the rendering logic. The visualization relies on raw SVG elements defined directly in the HTML, with basic styling applied via CSS to remove margins and hide overflow. A JavaScript console log statement executes when the page loads, but no interactive or animated behavior is present.

Ssuhaschitade

90% match