Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited May 17, 2022

Created on May 13, 2022

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

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.

Jjaredzhou

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

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

90% match

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black outline represents a face, featuring two small black eyes and a black arc for a mouth. The SVG graphic is built using React, with the shape’s geometry and the mouth’s arc path calculated using the D3.js `arc` function. The code defines the canvas dimensions and positions elements like the eyes and mouth relative to a central point within an SVG viewport of 960 by 500 pixels.

BBharadwaja

89% match

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a thick black outline dominates a 960 by 500 SVG canvas, flanked by two smaller unfilled circles positioned inside its upper area. The graphic uses React 18 loaded via a UMD script tag to manage the page structure, while the shapes themselves are drawn using raw SVG elements. The code demonstrates a minimal setup where a `circle` element defines the main filled shape and two additional `circle` elements act as decorative nodes, all without any interaction or animation. The styling sets a white background with hidden overflow.

DDuy Nguyen

89% match

Loading thumbnail…

Fork of Hello HTML?????

This example demonstrates a minimal React-based SVG visualization showing a single yellow circle with a black stroke centered on a 960 by 500 canvas. The component uses React 16.9 and ReactDOM to render the SVG directly into the DOM, computing circle positions from hardcoded center coordinates. Unlike a standard D3 approach, it relies solely on React’s declarative JSX syntax for SVG elements, with no data binding or interactive behavior beyond the static shape.

Ddllaino

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

88% match

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black border and a dark gray ring for a mouth form a simple face on a blank SVG canvas. The example demonstrates how React components wrap D3 shape generators, with the background circle defined as a reusable React component and the mouth created using D3's `arc` generator. The SVG is rendered directly into the DOM via ReactDOM, while D3 v7 provides the geometry for the arc path.

BBjoernujjwb

88% match