Fork of HTML-CSS-SVG

100%

Fork of HTML-CSS-SVG

✓ Published0🌍 Public

Last edited Mar 25, 2024

Created on Mar 25, 2024

This example displays a simplified smiley face drawn as SVG circles on a yellow background. It shows how React can be embedded in a plain HTML page through a UMD script tag, with `React` loaded from unpkg and logged to the console via `index.js`. The SVG markup uses `<circle>` elements for the face and eyes, styled with fill and stroke attributes. The page’s minimal setup demonstrates basic React integration without additional build tools or libraries.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example shows a simple SVG smiley face drawn on a yellow circle with black stroke, featuring two smaller circles for eyes. It serves as a minimal demonstration of embedding SVG elements directly within an HTML page alongside React. The code uses React and ReactDOM from external UMD scripts, while the face itself is rendered with raw SVG tags rather than React components. The page loads a bundle.js file and uses standard SVG circle elements positioned at fixed coordinates, with the body styling removing margins and hiding overflow.

Jjasandison

93% match

Loading thumbnail…

Fork of Hello HTML

This example renders a simple smiley face using SVG shapes on an HTML page. The visualization loads React 16.7.0 via a CDN script tag and logs the React object to the browser console. The SVG canvas contains three circles—a yellow face with black stroke and two black eyes—positioned with explicit coordinates. The code demonstrates basic SVG circle elements alongside React's UMD production build, with CSS applied to remove page margins and hide overflow.

Kkevinfu92@hotmail.com

92% match

Loading thumbnail…

Fork of HTML Starter

This example renders a simple yellow smiley face using SVG circles defined directly in JSX-like HTML markup within a React application. It demonstrates a bare-bones integration of React with SVG, where the face consists of a large filled circle for the head and two smaller black circles for eyes. The code references the global `React` object via `console.log(React)` but does not use any React components or state. A minimal CSS stylesheet removes body margins and hides overflow, ensuring the graphic fills the viewport.

AArtem Synytsia

92% match

Loading thumbnail…

Fork of Hello HTML

This example shows a static smiley face drawn with two eyes and a yellow circular head on a black-outlined SVG canvas. It demonstrates how React can be embedded in a plain HTML page using the React UMD build from unpkg, with the script logging the React object via `console.log(React)`. The SVG elements are hardcoded directly in the markup, not generated dynamically, and the styling uses minimal CSS to remove margins and hide overflow. The code renders a simple smiley face without interactive behavior or data-driven updates.

DDaniel B

92% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple smiley face drawn with SVG circles, and a React app that renders a “Hello JSX” heading. It demonstrates a minimal integration of React and SVG on a single page, with both elements present but separate. The code loads React and ReactDOM from CDN, uses `ReactDOM.render` to mount the React component, and defines the SVG graphic directly in the HTML. The SVG includes a large yellow circle with two smaller black-outlined circles, all styled with stroke widths to suggest a face.

Kkhuton

91% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple yellow smiley face drawn with SVG circles, including a face outline and two eyes positioned symmetrically around the center. The page loads React and ReactDOM from CDN, though the visible drawing is plain SVG markup embedded directly in the HTML with inline styles for the body. The React component in `index.js` renders a heading, but the actual face visualization is static SVG code that does not depend on the JavaScript framework.

Ccheztrolitor

91% match

Loading thumbnail…

Fork of HTML Starter

This example renders a simple smiley face using React and SVG. It draws a gray background with three circles—a large yellow head and two smaller white eyes—all styled with black outlines. The page includes a bare-bones HTML structure with inline CSS and a JavaScript `console.log` call. It loads React 17 from unpkg via CDN, though the rendering itself uses static SVG elements rather than React components.

WWilson

91% match

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a React-based rendering of a simple yellow smiley face, built entirely with SVG primitives. The visualization uses two React UMD builds (react.development.js and react-dom.development.js) loaded via CDN, with index.js logging the React object to the console. The face is composed of three circles—one large yellow body and two black eyes—drawn using SVG circle elements with explicit coordinates and stroke attributes. No interactive behavior or data processing is included; the output is purely a static, declarative SVG composition managed within an HTML page.

FFrancisco Miranda

91% match