Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Jul 31, 2024

Created on Jul 30, 2024

A static SVG smiley face is drawn directly in the markup, featuring a yellow circular head with black outline and two smaller black circles for eyes. The face is rendered using plain SVG elements—`circle` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—within an inline `<svg>` element sized at 960 by 500 pixels. The page loads React 18.3.1 and ReactDOM via CDN, and `index.js` imports both but only logs the `ReactDOM` object to the console, meaning no React components are used. The example demonstrates hand-coded SVG for simple geometric shapes without any data binding or interactivity.

AI-generated description

part 1 to making a smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example shows a simple static smiley face drawn with SVG circles, with a yellow head and two black eyes, rendered inside an HTML page. It uses React 16.9.0 loaded via a CDN, though the script only logs the React object to the console and does not drive the DOM. The SVG drawing is hand-coded directly in the HTML, with the face centered on a 960 by 500 viewport. The page includes embedded CSS to remove margins and hide overflow, and the render relies on the `bundle.js` file for any JavaScript execution.

Ccheeter_Lee

96% match

Loading thumbnail…

Fork of Hello HTML

This example presents a basic smiley face graphic rendered as static SVG elements within an HTML page. The visualization consists of a large yellow circle with two smaller black circles positioned as eyes, all drawn using geometric primitives. The code uses React 18.3.1 loaded from unpkg, though the visible rendering relies directly on SVG markup rather than React-generated output. The page uses minimal CSS to remove margins and hide overflow, producing a clean 960×500 display.

CChristian Larrea

96% match

Loading thumbnail…

Fork of Hello HTML

This fork of "Hello HTML" renders a static smiley face as a simple SVG, featuring a yellow circle with a black outline and two smaller black circles for eyes. The example demonstrates basic SVG markup embedded directly in an HTML page, stripped of any interactive behavior. It loads the React library via a UMD script tag but only logs the React object to the console, without using React for rendering. The drawing itself relies on raw SVG elements—`circle` tags—positioned at fixed coordinates within a 960×500 viewport, showing a minimal, non-dynamic chart-like figure.

Mmhalamek26@gmail.com

95% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple smiley face drawn as a static SVG graphic, with a yellow circular face and two black-outlined eyes. The rendering uses raw SVG elements inside an HTML file, while the React library is loaded via CDN but not actually used for rendering. The code explicitly positions each circle with pixel coordinates, setting the face radius, stroke width, and eye placement. The SVG canvas is fixed at 960 by 500 pixels, and the face is centered. No data or interactivity is involved; it serves purely as a minimal React-with-SVG template.

Nnsingh1@student.nitw.ac.in

95% match

Loading thumbnail…

Fork of Hello HTML

This example shows a static SVG smiley face composed of a yellow circle with black outline and two smaller black circles for eyes, centered on an 800-by-400 canvas. It uses React 16.9 loaded via a UMD script, though React is only console-logged in index.js and does not directly render the SVG elements. The entire graphic is hand-coded in the index.html file using inline SVG tags.

SSohail Ahmad

95% match

Loading thumbnail…

Fork of Hello HTML

This example renders a static SVG smiley face using React and raw HTML. The visualization displays a large yellow circle with black stroke as the face, two smaller black circles for eyes, and no visible mouth. The code creates the graphic through inline SVG elements embedded directly in the page body, with React imported but only logging to the console. The rendering approach relies on basic SVG shapes like `circle` rather than any data-driven logic or interaction.

MMMMRepa

95% match

Loading thumbnail…

Fork of Hello HTML

A static SVG smiley face depicts a yellow circle with black stroke and two black eyes. The page embeds React and ReactDOM via UMD builds, with an `index.js` file rendering a simple "Hello JSX" heading into a root div using `ReactDOM.render`. A separate inline SVG defines the face directly in the HTML, demonstrating how raw SVG markup coexists with React-rendered content in the same document.

Ddevon-campbell

95% match

Loading thumbnail…

Fork of Hello HTML

This example shows a static smiley face constructed from a yellow circle with two eyes, rendered inline in an SVG element sized 960 by 600. It uses React 18.2.0 and ReactDOM 16.7.0, loaded via UMD from unpkg. The `bundle.js` file logs the React object to the console, while the SVG shapes are drawn directly in the HTML without any JavaScript-driven data or interactivity. The rendering relies purely on SVG primitives such as `circle` elements with explicit stroke and fill attributes.

Ffarabeeislam@gmail.com

95% match