Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Feb 23, 2021

Created on Feb 23, 2021

This example shows a simple yellow circle with two smaller black circles positioned inside it, forming a basic face-like shape on an SVG canvas. The code demonstrates a minimal React setup by loading the React library via a CDN and logging the React object to the console. It combines raw SVG elements with inline JavaScript, using React 17 and standard SVG circle attributes for rendering. The example serves as a starting point for exploring how React can coexist with static SVG markup in a bare HTML page.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example displays a simple yellow circle with a black outline centered on an SVG canvas, flanked by two smaller black circles representing a stylized face. The page is a bare-bones HTML document that loads React 16.7.0 from a CDN but does not use any React components or methods. Instead, it relies on plain SVG elements—circle, cx, cy, r, fill, and stroke—to render the shapes, while CSS classes control font styling for an empty message area. The rendering approach is direct, static SVG without data binding or interaction.

JJake

95% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple yellow circle with a black outline and two smaller black circles positioned inside it, representing a face. The code uses React 18 to render the SVG directly into the DOM, with the entire visualization defined as static SVG elements. It relies on the ReactDOM API for rendering, while the SVG markup includes explicit coordinates for the face’s features. No interactive behavior or data fetching is present, making it a minimal starter template for React-based SVG visualizations.

AAndré Thiago Netto

95% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple yellow circle with two black eyes, resembling a basic face, rendered on a 960 by 500 pixel SVG canvas within an HTML page. The drawing uses raw SVG elements—a central `<circle>` for the face and two smaller `<circle>` elements for the eyes—with hard-coded coordinates and styling via CSS. The page loads the React 18.2.0 UMD libraries and includes a JavaScript file that logs the `ReactDom` object, demonstrating a minimal setup for integrating React with static SVG graphics.

Kkousikgvs

95% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple yellow circle with a thick black outline and two smaller unfilled circles, positioned to resemble a face. It renders directly as SVG elements inside the HTML body, using hard-coded coordinates and radii. The page includes React and ReactDOM scripts from unpkg, though the React code only logs the ReactDOM object to the console. Styling is minimal, hiding page margins and centering a large text message that is not otherwise used.

Aarinozavr

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

94% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple SVG drawing of a yellow circle with a black outline and two smaller circles positioned inside it, rendered on a 960 by 500 canvas. The code uses plain HTML, CSS, and JavaScript, with the page structure defined in `index.html` and React loaded via a UMD script from unpkg. The SVG shapes are drawn directly in the markup, with the main circle’s fill, stroke, and stroke width set inline. The `index.js` file imports React and ReactDOM but only logs the React object to the console, indicating the visual output relies solely on static SVG elements rather than dynamic React behavior.

TTy Vile

94% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple yellow circle with a black outline and two smaller unfilled circles, positioned to resemble a face. The large circle is centered within an SVG element sized 960 by 500 pixels, and the smaller circles are placed symmetrically on either side. The visualization uses raw SVG shapes defined directly in the HTML markup, with no external JavaScript libraries, demonstrating a minimal approach to vector graphics rendering and placement.

Mmhmdrmd97

94% match

Loading thumbnail…

Fork of HTML Starter

This example renders a simple face using React and SVG, displaying a yellow circle with two smaller black circles as eyes against a 960×500 canvas. The code imports React and ReactDOM, defines constants for dimensions and positions, and uses JSX to construct SVG circle elements with props like `r`, `cx`, `cy`, and `stroke-width`. It leverages ReactDOM.render to mount the component into the DOM, demonstrating a minimal React-based data visualization with hardcoded geometric values.

GGyanashree Giri

94% match