Document

100%

✓ Published0🌍 Public

Last edited Sep 27, 2023

Created on Sep 26, 2023

This example shows a static SVG face with two blank eyes and a yellow circle, rendered above a React-mounted heading. The page loads React and ReactDOM via UMD builds from unpkg, while the SVG elements are hard-coded directly in the HTML. The React app uses `ReactDOM.render` to display a simple "Hello JSX" message, but the SVG face remains independent of React state or interaction. The visualization demonstrates basic SVG shape composition without any data binding or dynamic updates.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Document

This example shows a simple static face composed of a yellow circle with black eyes, rendered directly into an SVG element on an HTML page. The page loads the React library via a CDN, though the code does not use React components, and includes a small JavaScript script that logs a message to the console. The SVG uses basic positioned circles with fill and stroke attributes to create the visual, with the body styled to remove margins and disable scrolling.

Lloknoe

90% match

Loading thumbnail…

Document

This example displays a static SVG drawing of a yellow circle with a black outline, containing two smaller gray circles positioned to resemble a face, overlaid on a React-rendered "Hello" heading. The SVG markup defines the shapes directly in the HTML, while React 18 and ReactDOM render the text content into a separate root element. The page uses inline CSS to remove margins and hide overflow, and the script logs the React object to the console without additional interaction or data processing.

WWilliam Cheung

90% match

Loading thumbnail…

part1

An SVG face with two black eyes and a yellow head is drawn statically in the page’s markup, while a separate React component renders a heading via `ReactDOM.render`. The example combines raw SVG elements with React 18 and React 15 CDN scripts, showing both declarative SVG and a minimal React app side by side. The fixed `circle` shapes and heading display a simple visual and textual output without interactivity.

SSamiksha Singh

89% match

Loading thumbnail…

Hello HTML

This example shows a static SVG face built from three circles—a yellow head with black outlines and two smaller eye circles—rendered directly in the page body. It also initializes a React 17 app that mounts a simple "Hello JSX" heading into a separate root div using `ReactDOM.render`. The SVG markup uses explicit `cx`, `cy`, and `r` attributes, while the React code employs JSX components. No data source or interactivity is present; the visualization demonstrates basic SVG primitives alongside a minimal React setup.

Rrhysagray

89% match

Loading thumbnail…

Document

A minimal React page displays a yellow SVG face with black outlined eyes on a 960 by 500 canvas. The static composition uses hardcoded circle coordinates within the SVG markup. React and ReactDOM are loaded from CDN, while the code logs ReactDOM to the console but only renders a placeholder root element. No interactive behavior or data binding occurs beyond the initial mounting.

Kkelleyjn

89% match

Loading thumbnail…

Let's make a face with HTML, SVG, React

A static SVG face is drawn with yellow circular head and two black eyes, using React to render the markup. The example demonstrates how React components can output SVG elements directly, with hardcoded coordinates and dimensions for the face features. The code imports React and ReactDOM, while the HTML file loads React and ReactDOM from unpkg CDN. This is a minimal illustration of combining React's declarative UI approach with SVG's vector graphics capabilities, though no interactive behavior or data binding is shown.

WWhitney Hung

89% match

Loading thumbnail…

Document

This example shows a static SVG face composed of three circles: two small black circles for eyes and one large yellow circle with a black outline for the head. The page embeds the React libraries via CDN and logs a greeting to the browser console. It renders the shapes directly in the HTML markup using standard SVG elements like `circle`, with fixed pixel coordinates and styling controlled by inline attributes. The accompanying CSS hides page scrolling for a clean, full-viewport presentation.

Bbelegic1

89% match

Loading thumbnail…

Untitled

A static SVG face rendered with yellow circular head, black stroke, and two small circles for eyes, shown at 960 by 500 pixels. The example demonstrates a minimal React setup using React and ReactDOM from UMD builds, with the SVG markup embedded directly in the HTML page rather than generated through React. The code logs ReactDOM to the console and includes a placeholder bundle.js reference, indicating an unbuilt or starter-level project. It illustrates basic SVG shape composition without interaction or data binding.

Bbressem

88% match