Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Jun 14, 2022

Created on Jun 14, 2022

A minimal React application renders a yellow smiley face as an SVG graphic, filling the browser window. The face consists of a large yellow circle with a black stroke, two small black eyes, and a simple mouth implied by the circle's outline. The code uses React and ReactDOM to create and render the SVG elements, calculating positions and dimensions from the window size. It directly manipulates SVG shapes through React's declarative component model.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example renders a simple yellow smiley face using SVG elements. It draws a large yellow circle for the head with a black stroke, and two smaller black circles for eyes, all positioned relative to the center of a 960 by 500 viewport. The visualization is built with React and ReactDOM, which render the SVG directly into an HTML page. The drawing logic uses hardcoded coordinates and radius values rather than an external data source.

Sshahfahadpro

95% match

Loading thumbnail…

Fork of Hello HTML

This is a minimal React-based visualization that displays a simple smiley face. It uses React and ReactDOM to define the application structure, with the face rendered as static SVG elements: a yellow circle for the head, two smaller circles for the eyes, and an implied mouth region. The code renders directly to SVG within an HTML page, relying on hard-coded coordinates and styling rather than dynamic data or interaction. The visualization serves as a basic demonstration of embedding SVG graphics through React’s component model.

Mmyq1499@gmail.com

95% match

Loading thumbnail…

Fork of Hello HTML

This example displays a simple yellow smiley face drawn with SVG primitives inside a React-based page. The rendering uses basic SVG elements like `circle` and `line` to form the face, eyes, and mouth, all placed within an 960x500 viewport. The code loads React 16.9.0 from a CDN and includes a separate `bundle.js` script, though the visible drawing does not rely on React components or state. A minimal styling rule hides body margins and overflow. The page also logs "hello" to the console, confirming the script execution.

SShailesh Patro

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

94% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow smiley face drawn as an SVG circle with two eye circles, rendered statically without interaction. The code uses React 17 to define an `App` component that returns SVG elements, with ReactDOM rendering it into the root HTML container. Dimensions and positions are computed via JavaScript variables for the face radius, center coordinates, stroke width, and eye offsets. The visualization demonstrates basic SVG circle shapes and React’s declarative JSX syntax for composing graphics, with no external data or dynamic behavior.

SShankar Ghimire

94% match

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a minimal React application that renders a static SVG smiley face, consisting of a yellow circle with two black eyes, inside an HTML page. The page loads React 18 and ReactDOM from unpkg CDNs, though the JavaScript file merely logs the React object to the console. The visualization uses inline SVG markup within the HTML, with a commented-out SVG block showing the intended graphic, and a containing div where the React app would mount. The design uses simple geometric shapes—circles with explicit coordinates, radii, and fill colors—to create the face.

NNikhil

94% match

Loading thumbnail…

Fork of Hello HTML

This example displays a minimal SVG smiley face: a yellow circle with a black outline and two smaller circles for eyes, rendered inside an HTML page. The visualization uses React 18 and ReactDOM 17 (loaded via UMD) to handle a console log of the ReactDOM object, while the visual itself is drawn as static SVG markup with hardcoded coordinates and radius values. The SVG scene is 960 by 500 pixels and centers the face horizontally, with no interactive or dynamic behavior present.

NNick Zanetti

93% match

Loading thumbnail…

Fork of Hello HTML

A React component renders a yellow smiley face in SVG, with two black eyes and a curved smile, centered within a 960x500 viewport. The App function uses d3.arc to generate the smile’s path, while custom React components, BackgroundCircle and Eye, draw the face’s base and eyes. The code imports d3’s arc and ReactDOM, and positions elements via SVG transforms and coordinate offsets.

IImade Osaretin

93% match