Skip to main content
SimilarExport ZIP
100%

Smile 1 - vanilla

✓ Published0🌍 Public
MMiloMadden
Last edited May 19, 2022
Created on May 19, 2022
Forked from Hello HTML

This example shows a simple smiley face drawn with two black eyes and a yellow circular head outlined in black, rendered as static SVG elements on a 960-by-500 canvas. It uses React 18.1.0, loaded via a UMD production build, though React only logs to the console and does not drive the markup. The face is composed entirely of hard-coded SVG `<circle>` elements, with no data or interaction. The page hides the browser scrollbars through inline CSS, and the embedded YouTube video in the README serves as a supplementary reference rather than part of the visualization.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

smiley

This example shows a simple smiley face drawn on an SVG canvas, with two black eyes and a yellow circular face outlined in black. The code uses React 18 via a UMD build and renders the graphic entirely through static SVG elements, including `<circle>` tags for the face and eyes. No interactive behavior or data binding is present; it is a purely presentational visualization demonstrating basic SVG shapes and styling within a React setup.

Ww.fukuyama@gmail.com
92% match
Loading thumbnail…

Smile face - part 1

A static smiley face is drawn in an SVG canvas, with a yellow circular head and two black-outlined eyes positioned symmetrically on either side. The head spans nearly the full width of the 960-by-500 coordinate space, while each eye is a smaller circle centered at fixed x-coordinates. The rendering relies on raw SVG elements—circle tags with fill, stroke, and stroke-width attributes—defined directly in the HTML. Although the page loads React 18.2 via a UMD script and imports it in index.js, the example only logs the React object to the console and does not use React for drawing or state.

CCharmy Vora
92% match
Loading thumbnail…

Smile

The visualization shows a simple smiley face, likely intended for static display within an SVG canvas. It draws a large yellow circle as the face with a black outline, a solid black circle as one eye, and additional shapes to suggest other facial features. The rendering uses React and ReactDOM to manage the component structure, while the face is composed of raw SVG elements like `<circle>` and `<svg>` tags. The code references React 16.9.0 and ReactDOM 17.0.2, with the HTML page embedding a `bundle.js` script for the React logic. No interactive behavior or dynamic data is present.

FFrancesco Viscanti
91% match
Loading thumbnail…

Smile Face Pt 1

This example renders a static smiley face using only Scalable Vector Graphics (SVG) primitives. It consists of a large yellow circle with a black stroke for the head, and two smaller black circles for the eyes, all laid out on a 960 by 500 pixel canvas. The code defines the shapes declaratively via SVG's `circle` elements and their `cx`, `cy`, and `r` attributes, with colors and stroke widths set through inline presentation attributes. Rendering is handled directly by the browser's SVG engine, and the example's only interaction with React is a console log of the library itself.

Zzilvus
91% match
Loading thumbnail…

Smile face part 1.

A yellow smiley face rendered as a static SVG graphic fills a 960-by-500 canvas. Two black eye circles and a curved mouth are drawn directly in the markup. The example loads React 18.1.0 via UMD scripts and calls `console.log(React)` in `ids.js` and `index.js`, but no React components or interactive behavior are implemented. The SVG uses hardcoded coordinates, with comments noting calculations for centering and eye offset, while the body style sets margin and overflow to zero.

Jjun-pac
90% match
Loading thumbnail…

Smile Face Part I

A single yellow smiley face rendered as static SVG circles sits centered on a black-bordered canvas. The code draws the face using three circle elements: one large yellow circle for the head and two smaller black circles for the eyes, with no mouth or animation visible. It uses React 16.7.0, loaded via CDN, but only logs the React object to the console without applying any React components to the SVG. The example demonstrates a minimal hand-coded SVG composition within an HTML page.

DDanilo Eduardo
90% match
Loading thumbnail…

Smiley Face pt 1

This example shows a simple yellow smiley face drawn on a fixed 960-by-500 SVG canvas, with two black circles serving as eyes and a larger yellow circle as the face outline. The code uses plain SVG elements (`circle` with `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width`) embedded directly in the HTML, alongside a React 17 UMD script that is imported via `index.js` but only logs the React object to the console. The rendering approach is static SVG, with no dynamic data or interaction.

Qquintonio1000
90% match
Loading thumbnail…

Smile face 1

A simple SVG smiley face rendered with two black eyes and a yellow circular head outlined in black. The face lacks a mouth, showing only the head and eyes. The visualization is built using React in an HTML page, with SVG circle elements defining the head and eyes at fixed coordinates within a 960 by 500 viewport. The code imports React and logs a message, but applies no interactive or data-driven behavior.

Nnikhilkashid3593
90% match