Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Jun 2, 2021

Created on Jun 2, 2021

A simple comparison of hand-written SVG with React. The page renders a static SVG face—two solid circles for eyes inside a yellow circle with a black stroke—directly in the HTML body. The code loads React and ReactDOM from a CDN, but only logs the ReactDOM object to the console, without using React for rendering. The focus is on the bare minimum structure of an HTML page with inline CSS and JavaScript.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

A simple SVG face rendered with React, featuring a yellow circle head with two black eyes, demonstrates basic SVG styling and React integration. The code uses React 17 via UMD, loads it through a script tag, and styles the SVG elements with CSS selectors like `#head` and `.eye-l`. The SVG is set to 960 by 500 pixels with a red background, and the shapes use standard SVG attributes for positioning and appearance. This example highlights static SVG visualization and React’s console logging capability.

DDain Park

90% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple SVG face with two eyes rendered beside a React-powered “Hello JSX” message in the page root. It demonstrates mixing declarative React components with raw SVG elements in the same document. The code imports React and ReactDOM, uses `ReactDOM.render` to mount a functional component, and relies on React 18 UMD builds loaded from unpkg. The SVG drawing uses basic circle elements with fill and stroke styling, while the React portion highlights JSX syntax within a minimal HTML starter page.

MMOUSSA TOURE

90% match

Loading thumbnail…

Fork of HTML Starter

This example presents a simple SVG face rendered with React and ReactDOM. The code defines a yellow circle with a black stroke to form the head, and two smaller circles for eyes, using fixed dimensions and coordinates within an SVG canvas. React elements are created using JSX and mounted to the DOM via `ReactDOM.render`, while the page loads React from unpkg CDN links. The visualization demonstrates basic SVG circle primitives and React component structure without interactive behavior or external data.

RRonanCurbe10

90% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple, static SVG illustration of a face using two circles for eyes and a larger yellow circle with a black outline for the head. The rendering relies on raw SVG elements defined directly in the HTML body, with CSS used to remove page margins and hide overflow. The code snippet includes a script tag referencing React 17.0.2 via a CDN, though the visualization itself does not employ any React-specific functionality or dynamic data, instead presenting fixed geometry on a 960 by 500 canvas.

CcoldPen

89% match

Loading thumbnail…

Fork of Fork of HTML Starter

A simple SVG face rendered with React showcases two black eyes and a yellow circle with a black stroke. The code defines fixed dimensions and positions using JavaScript constants, then constructs the visual elements with React's JSX syntax. D3 is loaded via a CDN, though it is not directly used. React DOM renders the SVG into the page, while CSS removes the body margin for a clean, full-bleed display.

Jjwadh

89% match

Loading thumbnail…

Fork of Hello HTML

This fork of “Hello HTML” demonstrates a minimal React setup rendering an SVG face composed of three circles directly in the page’s markup. The code loads React 17.0.2 and ReactDOM from unpkg, logs the React object to the console, and uses static SVG elements—a large yellow circle for the head and two black circles for eyes—within a 960×495 viewport. No dynamic behavior or data binding occurs; it simply shows how React coexists with plain HTML and SVG in a single document.

PPermille

89% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple face using React and SVG, consisting of a yellow circle for the head and two smaller black circles for the eyes. The positioning is computed from the SVG dimensions and offsets defined in the JavaScript. The code is written as a React function component that returns JSX, which is then mounted into the DOM via `ReactDOM.render`. The HTML page loads React and D3 from a CDN, and CSS resets the body margin for a clean canvas.

SSanchay

89% match

Loading thumbnail…

Fork of HTML Starter

This example renders a simple SVG face composed of three yellow and black circles using plain HTML, CSS, and JavaScript. It demonstrates basic styling via CSS class selectors (such as `.face`, `.leftEye`, and `.rightEye`) that define circle positions and radii, while the JavaScript console logs the React library loaded from a CDN. The visualization itself does not use React for drawing; instead, it relies on static SVG markup with CSS coordinates. It serves as a minimal starter template for building and testing web-based graphics.

MMintuka

89% match