Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Kkhuton
Last edited Nov 10, 2021
Created on Nov 9, 2021
Forked from 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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a simple smiley face rendered as a static SVG graphic using React. The drawing consists of three circles: a large yellow circle for the face and two smaller black circles for the eyes, all placed within a 960 by 500 pixel SVG canvas. The code uses React and ReactDOM to render the SVG elements, with styles defined in CSS. The visualization demonstrates basic React component structure and declarative SVG circle creation without any interactive or data-driven behavior.

FFlorian Maas
95% 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
95% 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
94% match
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
94% match
Loading thumbnail…

Fork of HTML Starter

This example shows a simple smiley face rendered as static SVG shapes, including two eyes and a yellow circle with a black outline. It demonstrates a minimal React setup where React and ReactDOM are loaded via CDN from unpkg, and the SVG is defined directly in the HTML. The code references a separate JavaScript file that logs the ReactDOM object to the console, though the face itself is drawn without any React components or dynamic behavior.

Mmariacecilia.bnc@gmail.com
94% match
Loading thumbnail…

Fork of Hello HTML

This example shows a simple static SVG smiley face rendered directly in React, with two empty circles as eyes and a larger yellow circle as the head. The HTML file loads React and ReactDOM from CDN, then uses plain JSX inside a script tag to define the SVG elements. It demonstrates how React can manage SVG markup without any additional visualization libraries, relying solely on ReactDOM to render the component tree into the page.

EEdward Chen
94% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple smiley face drawn with scalable vector graphics (SVG) circles in a React application. The code uses React’s declarative JSX syntax to define SVG elements, with D3 loaded but not actively used. It renders a yellow face with black outline, two eyes, and a smile on a fixed 960x500 canvas, demonstrating basic component structure and inline styling within a React component.

KKrzysiek1985
94% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple smiley face using React and SVG. It draws a yellow circle with a black stroke as the head, plus a single black eye circle positioned with fixed offsets from the center. The code uses React’s `ReactDOM.render` to mount the component and defines the SVG shapes inline with JSX, while D3 is loaded but only used to create a sample arc path that is not displayed. The page resets the body margin via CSS for full-window rendering.

DDeekshithVemula
94% match