Fork of React Starter

100%

Fork of React Starter

✓ Published0🌍 Public

Last edited May 31, 2022

Created on May 31, 2022

This example renders a single yellow circle with a black outline on an SVG canvas using React. The circle is positioned at coordinates (480, 250) with a radius of 245 pixels. The code defines an `App` component that returns inline SVG markup and mounts it to the DOM via `ReactDOM.render`. It uses React 16.13.1 and the UMD production builds of React and ReactDOM, with the SVG element specifying width and height attributes of 960 and 500.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React Starter

This example shows a single yellow circle centered on a 960 by 500 SVG canvas, with a thick black stroke and no accompanying data. The circle’s radius and position are computed from the canvas dimensions, and the stroke width is set to 30. Built with React and ReactDOM, the visualization defines the SVG markup directly in a JSX component and renders it into the page’s root element. The code uses React’s `ReactDOM.render` to display the SVG, with all geometry hard-coded in the component.

Zzaaaza

92% match

Loading thumbnail…

Fork of Hello HTML

This example renders a single yellow circle with a black outline on a 600 by 600 SVG canvas. The React component `App`, built with React 18 and ReactDOM 17, directly returns the SVG markup without any additional data or interactivity. It demonstrates the minimal setup for embedding a static SVG graphic within a React application, referencing the required React libraries from unpkg and mounting the component to a root div.

AAayan Shaikh

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

91% match

Loading thumbnail…

Fork of React Starter

This example shows a simple yellow circle with a black outline, two smaller unfilled circles representing eyes, and a black line for a mouth, forming a static smiley face. The React component `App` returns a single SVG element with hardcoded coordinates and dimensions, rendering the shapes declaratively via JSX. It uses the React 16.13.1 UMD build and `ReactDOM.render` to mount the component into the `#root` div in the HTML page. All graphical elements are drawn directly with SVG primitives, with no data or interaction involved.

Aazeemkh

90% match

Loading thumbnail…

Fork of React Starter

A yellow circle with black outline centered in an SVG viewport displays two smaller black circles as eyes. The React component renders the graphic using hardcoded dimensions and coordinates, with the main circle’s radius derived from the viewport height and stroke width. The code uses React and ReactDOM to mount the component into the DOM, with the SVG elements defined directly in JSX. All shapes are static, with no interaction or data input.

NNarottam Medhora

90% match

Loading thumbnail…

Fork of HTML Starter

This example shows a single large yellow circle centered in an SVG viewport with a black stroke, rendered at a fixed 940 by 500 pixel size. It is built with React 18 and ReactDOM, using JSX to define the SVG circle element directly in the component. The rendering relies on React’s `createElement` and `render` methods, with the SVG markup embedded inline. No data, interaction, or animation is present; it serves as a minimal starter template for SVG visualization using React.

Ggoldensage34

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

89% match

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a thick black outline is drawn on a 960 by 500 SVG canvas. The circle is centered at (480, 250) with a radius of 245. The React app defines the SVG directly using JSX, and ReactDOM renders the `App` component into the `#root` element. The code also includes commented-out markup for a face-like arrangement of additional circles and a reference to React version 16.9.0.

Kkpav33

89% match