Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
AAdamRyanUK
Last edited Dec 28, 2021
Created on Dec 24, 2021
Forked from Hello HTML

A smiley face renders as a pink circle with a purple outline and two dark eye dots on an SVG canvas. The example demonstrates minimal React integration, importing React in the JavaScript file while the HTML markup defines the SVG shapes directly. Using plain SVG `<circle>` elements, it positions a large 245-radius face at the center, with smaller 40-radius eyes placed symmetrically. React loads via a CDN script tag, though the visualization itself relies solely on static SVG attributes without dynamic state or interaction.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

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

This example shows a simple smiley face, drawn as three SVG circles on a 1000 by 1000 canvas. It uses React via the `react.production.min.js` script and raw SVG markup for rendering, with no external data source. The face is composed of a large yellow circle outlined in red for the head, and two smaller black circles with red strokes for the eyes. The layout is static and hard-coded, with circles positioned using explicit `cx`, `cy`, and `r` attributes.

CChirag Bansal
92% match
Loading thumbnail…

Smiley

A smiling face rendered as a static SVG visualization, composed of a yellow circle with a black outline and two smaller black circles for eyes. The example demonstrates a minimal React setup, loading React via a CDN script tag and embedding SVG elements directly in the HTML. It uses React 16.9.0 and relies on plain SVG circle elements rather than any data-binding or animation libraries, serving as a basic template for rendering shapes with React.

Ppeterforberg
92% match
Loading thumbnail…

Smiley face

A yellow circle with a black outline forms the face, containing two smaller black circles as eyes. The example demonstrates static SVG rendering with React, though the React library is loaded but not actively used for drawing. Instead, the visualization is created directly using SVG elements like `circle` for the face and eyes, with hardcoded coordinates and styling. The page loads React and ReactDOM via UMD bundles, but the final graphic relies purely on raw SVG markup within the HTML.

Ffutureofworld
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
92% match
Loading thumbnail…

Smiley face

This example draws a simple smiley face using SVG shapes. It shows a large yellow circle for the head, two smaller unfilled circles for eyes, and relies on the stroke and fill attributes from the React-created SVG markup. The code uses React 17 via the UMD production build to render the SVG directly in the HTML, with inline properties for positioning and styling. The face is centered on a 960×500 canvas, and the mouth is implied by the head’s bottom edge rather than drawn explicitly.

Rrikaami13
92% match
Loading thumbnail…

Smiley Face pt 1

A static SVG smiley face drawn with three circles shows a yellow face and two black eyes against a blank page. The example demonstrates basic React integration by loading the React production library via CDN and logging the React object from the entry script. The SVG markup is written directly in the HTML file, using circle elements with attributes for position, radius, fill, and stroke, while the accompanying JavaScript file only initializes the React import without rendering any components.

Bbkelner
91% match