Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Jun 17, 2021

Created on Jun 17, 2021

This example displays a single yellow circle with a black stroke, centered on a 960 by 500 SVG canvas. The circle's radius is calculated from the height and stroke width, and the drawing element is positioned via a group transform. The code uses React 17 to define a `BackgroundCircle` component and renders it through `ReactDOM.render`, while an `arc()` from D3 v7 is used solely to log an arc object to the console, not for the visual output.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Fork of Hello HTML

A circle with a thick black outline and yellow fill is drawn at the center of an SVG canvas. Two smaller black circles are positioned to the left and right of the center. The visualization uses React and ReactDOM to render the SVG elements, with the center circle's dimensions calculated from the canvas height and strokeWidth. The code imports the `arc` function from the D3.js library, though it is not used in the rendering.

LLena Yu

91% match

Loading thumbnail…

Fork of Hello HTML

This example displays a single yellow circle with a thick black outline, centered on an SVG canvas. The visualization is generated using React and ReactDOM, which render the SVG element directly into the page’s root div. The circle’s position and radius are calculated from fixed width and height constants, and the rendering relies solely on the SVG circle primitive without any data or interaction.

Wwordman2

91% match

Loading thumbnail…

Fork of Hello HTML

This example displays a single large yellow circle with a green stroke, centered on a 1000×1000 SVG canvas. It uses React 16.7.0 to render the circle, with the `ReactDOM.render` method mounting the component into a root div. The SVG circle is defined using explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, and the code demonstrates a minimal React setup alongside an HTML page that loads React and ReactDOM from unpkg CDN links.

Kkumaaark

91% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow circle with a black outline and a smaller black circle centered inside it, rendered on an SVG canvas. The entire visualization is created directly within an HTML page using raw SVG markup, specifying the circle elements' positions, radii, fills, and strokes. The page is styled with minimal CSS to remove margins and hide overflow, and the React library is imported in a JavaScript file, although no React-specific components or data sources are used in the drawing itself.

AAlex Avram

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

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