Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Sep 25, 2022

Created on Sep 25, 2022

This example demonstrates a React component that renders a simple SVG face with a yellow circle, two black eyes, and a black stroke. The code uses React and ReactDOM to mount an `<App />` component into a `#root` div, while the commented-out SVG markup shows the intended geometric shapes. The actual rendered output displays only the text "Hi," as the SVG code is not active. The example highlights how a React-based visualization can be structured, using standard SVG elements like `<circle>` with `cx`, `cy`, and `r` attributes, though the live demo currently shows no graphical output.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example uses React and ReactDOM to render a static SVG scene of a yellow circle with a black outline and two smaller black circles positioned as eyes, creating a simple face. The SVG elements are defined directly within a React component and mounted into the DOM via ReactDOM's `render` method. The code also logs the React and ReactDOM objects to the console. The visualization relies on SVG's basic shape primitives (`circle` with `r`, `cx`, and `cy` attributes) and does not incorporate any external data or interaction.

KKay Nguyen

94% match

Loading thumbnail…

Fork of Hello HTML

This example displays a static SVG face composed of three circles—two small eyes and one large yellow head with a black outline—rendered inside a React application. The visualization is drawn directly in the `index.html` file using SVG markup, while the React component `App.js` renders a simple text heading. The code uses React 18.2.0 and the `createRoot` API from `react-dom/client` to mount the application. The SVG output is embedded in the HTML body alongside the React-generated content, making the face the primary visual element.

Aandy

93% match

Loading thumbnail…

Fork of Hello HTML

A static SVG face rendered with React and raw SVG elements. The code uses React to manage the SVG structure, drawing a yellow circle for the face, black strokes for borders, and two smaller circles for eyes. The example demonstrates basic SVG shapes and React integration, with the SVG output displayed directly in the HTML page. It uses React 16.9.0 from a CDN and relies on native SVG attributes like `cx`, `cy`, `r`, and `fill`.

11G4S

93% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple face-like graphic composed of three SVG circles: one large yellow circle with a black stroke for the head, and two smaller unfilled circles for the eyes. It demonstrates the most basic structure of an SVG visualization within an HTML page, using React from the UMD build loaded via a script tag. The code renders the SVG directly in the body without any React components or JavaScript execution beyond a console log of the imported React object. The rendering approach is static SVG, with no data binding or interaction.

MMeghana Bangari

92% match

Loading thumbnail…

Fork of Hello HTML

A minimal React application renders a static SVG face: a yellow circle with a black outline, two smaller unfilled circles as eyes, and no interactive behavior. The page loads React 17 and ReactDOM from unpkg CDN links in index.html, while index.js simply imports both libraries and logs "hi" to the console. The visualization demonstrates basic SVG shape composition within a React setup, using hardcoded coordinates and radii for the circle elements.

FFrank Vamos

92% match

Loading thumbnail…

Fork of Hello HTML

This example demonstrates how to render simple SVG graphics using React by drawing a yellow circle face with two dark eye circles on an HTML page. The code directly embeds SVG elements into the markup, applying CSS to remove page margins and hide overflow. It imports the React 18.3.1 UMD library via a CDN script tag, then logs the React object to the console in an index.js file without using React components or state. The visualization relies purely on static SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. It serves as a minimal starting point for integrating React with SVG rendering.

JJenniMaier@gmx.de

92% match

Loading thumbnail…

Fork of Hello HTML

This example shows a smiling face drawn with SVG circles, rendered inside a React component. The face consists of a yellow circle with a thick black stroke, plus two smaller circles for eyes. The code imports the `arc` function from `d3`, though it is only logged and not used in the final output. ReactDOM renders the `<App>` component, which uses JSX to define SVG elements, with hardcoded positions and radii for the face features.

Nnonbots

92% match

Loading thumbnail…

Fork of Hello HTML

This example combines a React-rendered “Hello JSX” heading with a static SVG face drawn directly in HTML. The SVG contains three circles—a large yellow outline and two smaller black eyes—created with basic shape elements. React 16.9.0 and ReactDOM render the JSX component into a root div, while the SVG sits outside the React tree, using fixed coordinates and no data binding. The page demonstrates a minimal integration of React with hand-coded SVG markup.

Ccasclark

92% match