Skip to main content
SimilarExport ZIP
100%

Smiley face

✓ Published0🌍 Public
Rrikaami13
Last edited Apr 9, 2021
Created on Apr 8, 2021
Forked from HTML Starter

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.

AI-generated description

Halfway of creating a smiley face part 1

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

This example shows a simple smiley face rendered as a static SVG graphic. A large yellow circle forms the head, with two smaller black circles representing the eyes; the mouth is not drawn in this version. The visualization uses React 18.2.0 via a UMD script tag, though the SVG elements are written directly in the HTML markup rather than generated through React components. The code sets the SVG viewport to 960 by 500 pixels and applies basic styling for the circle fills and stroke.

AAndres Perdomo
95% match
Loading thumbnail…

Smiley face

This example renders a simple smiley face using SVG circles: a large yellow circle for the face and two smaller black circles for eyes, all positioned on an empty 970 by 500 canvas. The drawing is defined directly in the markup with absolute coordinates and styling for fill, stroke, and stroke width. The page loads the React UMD build from a CDN, though the visualization itself relies solely on static SVG elements and does not employ any interactive behavior or dynamic data.

SShreyasi12786
94% 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
94% match
Loading thumbnail…

Smiley Face pt 1

This example draws a simple smiley face using static SVG elements: a large yellow circle for the head and two smaller black circles for eyes. The code defines the SVG directly in the HTML markup, while React is loaded via UMD builds but not used to render any components. The face lacks a mouth, leaving the expression incomplete despite the title. The rendering uses fixed coordinates and dimensions within a 960 by 500 viewport.

Ttaujeng
94% 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
94% 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
94% 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
94% 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
94% match