Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
CChirag Bansal
Last edited May 30, 2021
Created on May 30, 2021
Forked from Hello HTML

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.

AI-generated description

Halfay for smiley face

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

Smiley face 1

This example shows a simple, static smiley face constructed from three SVG circles: a large yellow face with a black outline and two smaller black eyes. The face is centered on a 960 by 500 canvas. The visualization is rendered using React, with the SVG elements defined directly in the HTML markup. No interactivity or dynamic behavior is present; it serves as a basic demonstration of combining React with raw SVG shapes.

Ddamianklick
94% match
Loading thumbnail…

Smiley face

This example shows a simple smiley face drawn as a yellow SVG circle with black outlines and two dark eye circles, rendered at the center of a 960×500 canvas. The face is built using raw SVG elements (`<circle>`) inside an HTML page, with React loaded via a script tag but not actually used in the rendering. The drawing is purely static, relying on SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke-width` to define the face and eyes without any interaction or animation.

Zzoehuhu-cn
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 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
94% 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
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