Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Dec 3, 2021

Created on Dec 3, 2021

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello html

This example shows a static yellow circle with a black border rendered in SVG, with two smaller unfilled circles positioned inside it to suggest facial features. The visualization uses React for component structure and renders SVG elements directly. The main circle is centered using computed width and height variables, while the smaller circles use hardcoded coordinates. The code includes both a direct SVG render in the HTML file and a React component approach in index.js, though only the direct SVG is visible on screen.

Ssukhmani0117

92% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple static composition of three circles rendered as inline SVG, with a yellow ring enclosing two smaller unfilled circles. The page also renders a heading via React’s `ReactDOM.render` method, targeting a separate `#root` div. The SVG markup is hard-coded directly in the HTML body, not generated by React. The drawing uses basic circle elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes to produce the visual.

LLaKisha David, PhD

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

91% match

Loading thumbnail…

Fork of Hello HTML

This example displays a static yellow circle with two smaller black circles, evoking a simple face. Rendered as an SVG, the shapes are drawn directly within an HTML page. The code uses React to manage a separate heading element, while the visualizations are defined using raw SVG markup, including `<circle>` elements with explicit `r`, `cx`, `cy`, `fill`, and `stroke` attributes. The page loads React and ReactDOM from a CDN, and the SVG is output without additional data processing or interaction logic.

DDataVizardHB

90% match

Loading thumbnail…

Fork of Fork of Hello HTML

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.

JJosepAnSabate

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

This example shows a simple yellow circle with two smaller black circles arranged as a face, rendered directly in an SVG element. The visualization uses React 17, loaded from the unpkg CDN, though the code only logs the React object to the console without invoking any React components. The SVG circles are drawn with hardcoded coordinates and dimensions, using attributes like `cx`, `cy`, and `r`, while CSS sets the body to have no margin and hidden overflow. The outer circle includes a black stroke, defining the face’s outline against the default white background.

Tturk-i

90% match