Skip to main content
SimilarExport ZIP
100%

Smiley face

✓ Published0🌍 Public
PPaula Donoso
Last edited Apr 21, 2021
Created on Apr 21, 2021
Forked from Hello HTML

A yellow circle with a black stroke forms a smiley face, with two smaller filled circles placed as eyes. The entire graphic is rendered as static SVG elements inside an HTML page. The page loads React and ReactDOM from a CDN, though the visible drawing is done with direct SVG tags rather than through React components. The code uses the `circle` element with explicit `cx`, `cy`, and `r` attributes, and the main face has a `fill` of yellow and `stroke-width` of 5. The example demonstrates basic SVG shape composition in a minimal setup.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

Smiley Face

A yellow smiley face rendered as an SVG circle with two smaller black circles for eyes sits centered on a 960×500 canvas. The page loads React 16.9 and ReactDOM 17.0.2 from unpkg, though the visualization itself uses only raw SVG elements—`<circle>` tags with explicit `cx`, `cy`, and `r` attributes—rather than React components. A script tag logs “React” and `index.js` imports React and ReactDOM, but no interactive behavior or data binding is present. The example demonstrates a static, hand-coded SVG composition embedded in an HTML file.

HHuhej
94% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline and two black inner circles forms a simple smiley face. The face is drawn entirely with SVG circle elements, centered within a 960 by 500 viewport, using React's JSX syntax to render the markup. The code sets explicit pixel values for the face radius, eye offset, and eye radius, and relies on ReactDOM to mount the SVG into the page.

MMaulana Adam Sahid
94% match
Loading thumbnail…

Smiley face

A simple SVG smiley face rendered with React and ReactDOM renders a yellow circle with a black stroke and two smaller black circles for eyes in a 960 by 500 viewport. The static composition is defined directly in the HTML markup, while React’s JavaScript library is loaded but unused for drawing the shapes. The example demonstrates basic SVG circle elements with explicit x, y, and radius attributes to construct a minimal, non-interactive illustration.

Bbrendakoo
94% match
Loading thumbnail…

Smiley Face Part I

A static yellow circle with a black stroke forms the face, while two smaller black circles serve as eyes, leaving the smile absent. The SVG is defined directly in the HTML, centered at 960×500 with coordinates computed from the viewport dimensions. The example integrates React and ReactDOM via CDN scripts, logging both to the console, though no React components render the graphic—the markup is plain SVG. This demonstrates a minimal hybrid setup where React loads alongside raw SVG markup.

Eedgardoisla
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 Part 1

A static smiley face rendered as a yellow circle with two smaller black eyes sits centered within an SVG canvas. The graphic uses three raw SVG `circle` elements with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes to draw the face and eyes, while the page also imports React and ReactDOM, though the React code only renders a separate "Hello JSX" heading. The example demonstrates a minimal, framework-agnostic SVG drawing alongside a basic React setup in the same HTML file.

Zzepedrobessa
94% match
Loading thumbnail…

Smiley Face :)

A yellow circle with a black outline forms a simple smiley face on a plain white background. Two smaller unfilled circles serve as the eyes, placed symmetrically on either side of the face. The graphic is rendered as static SVG shapes, with circle elements positioned using explicit cx and cy coordinates within a 960 by 500 viewport. This example demonstrates basic declarative vector drawing in React, using no external visualization libraries or data sources.

Llmurugan
93% match