Smiley

100%

Smiley - No code(JS)

✓ Published0🌍 Public

Last edited Feb 16, 2022

Created on Feb 15, 2022

This example shows a simple smiling face drawn as three SVG circles, with a yellow face and two black eyes, on a 960 by 500 canvas. The page renders the shape directly in the HTML markup, while React and ReactDOM are loaded via CDN to output a separate “Hello World” heading into a root div. No interaction or data binding occurs; the visualization is purely static SVG output.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

This example displays a simple smiley face drawn with basic SVG shapes—a yellow circle for the face and two smaller black circles for the eyes—centered on a 960 by 500 canvas. The page loads React and ReactDOM via CDN, though the visible graphic is produced directly with static `<circle>` elements in SVG markup, not through React rendering. The file also includes a separate `index.js` that logs ReactDOM and renders a "Hello JSX" heading, indicating the framework setup but not affecting the displayed smiley image.

CChaseRogers1027

92% match

Loading thumbnail…

Smiley face

This example draws a simple smiley face using only SVG primitives in a React-free HTML page, though the listing notes React as a possible framework for the v3 source. The face consists of three circles: a large yellow head with a black outline and two smaller black circles for eyes, all positioned within an SVG canvas. The code relies on standard SVG elements like `<circle>` and CSS styles for the page layout, with no data binding or interactivity. It demonstrates basic declarative vector graphics rendering in the browser.

Jjamlicker

92% match

Loading thumbnail…

Smiley Face

This example uses React and SVG to render a static smiley face. The face is drawn with three SVG circle elements on a 960x500 canvas: a yellow outer circle for the head and two black circles for the eyes, all with visible black strokes. The React component renders only a heading, while the SVG markup is placed directly in the HTML body, so the visualization is not generated through React itself. The code relies on the React and ReactDOM production libraries and a bundled JavaScript file, though no interactive behavior is implemented.

RRidhuparan

92% match

Loading thumbnail…

Smiley face Part 1

This example displays a static smiley face constructed from three SVG circles: a large yellow face with a black outline and two smaller black circles for eyes, rendered on a 960 by 500 canvas. The drawing is implemented directly in the index.html markup using basic SVG elements, including circle tags with explicit coordinates and stroke attributes. Although the page loads React and ReactDOM libraries, the code does not utilize them for the visualization itself; the bundled JavaScript is minimal. The face is centered horizontally and vertically, with the eyes positioned symmetrically around the center point.

FFlore

92% match

Loading thumbnail…

This example renders a simple smiley face using React and SVG. The visualization draws three circles: a large yellow head with a black stroke, and two smaller black circles positioned as eyes. The code leverages the React and ReactDOM libraries to mount the SVG graphic into an HTML page, with the circle elements defined using SVG properties for fill, stroke, position, and radius. No data is loaded or processed; the graphic is purely static.

SShreyansh shrey

92% match

Loading thumbnail…

Smiley Face 1

This example displays a simple smiley face made of three SVG circles: one large yellow circle for the face and two smaller black circles for the eyes. The shapes are drawn directly in the HTML markup with hardcoded coordinates and styling. React is loaded from a CDN in the page, though the code only logs the React object to the browser console and does not use it for rendering. The SVG canvas is set to 960 by 500 pixels, with the face centered horizontally.

Rrmanonl

92% match

Loading thumbnail…

Smiley Face pt. 1

This example shows a static smiley face drawn as three SVG circles: a large yellow circle for the face and two smaller black circles for the eyes, all centered on a 960-by-500 canvas. The code uses raw SVG elements inside an HTML page, with React loaded via CDN to render a separate, unused “Hello JSX” component. The face itself is not generated through React or any charting library; instead, it relies on hardcoded coordinates for each circle’s position and radius, with stroke and fill attributes controlling the outline and color.

TTay

91% match

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

91% match