Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
RRahul Raveendran
Last edited Dec 15, 2021
Created on Dec 15, 2021
Forked from HTML Starter

This example draws a simple smiley face using raw SVG elements within a single HTML file. It uses the `circle` element to create the face and eyes, with CSS setting the page margin to zero and hiding overflow. The face is rendered as a yellow circle with a black stroke, and two smaller black circles serve as the eyes; the code includes a typo in the `stroke` attribute of the eye circles. The visualization demonstrates basic SVG shape creation without any JavaScript or external libraries.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

This example displays a simple smiley face rendered as an SVG graphic. It shows a large yellow circle with a black outline as the face, and two smaller black circles positioned to represent the eyes. The illustration is created using raw SVG elements within an HTML page. The code defines the shapes using `<circle>` elements, setting the main face’s center, radius, fill, and stroke, while the eyes are positioned relatively based on the face’s center. The page uses CSS for basic layout, ensuring the SVG fits without margins or scrollbars. The rendering relies on the browser’s SVG support, with no additional JavaScript libraries.

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

Smiley Face Pt 1

This example shows a simple smiley face drawn as a static SVG graphic: a yellow circle with a black outline, two black eye circles, and no mouth. The visualization uses plain SVG elements—three `<circle>` tags—embedded directly in an HTML page with CSS to remove the default margin and hide overflow. It demonstrates basic SVG rendering with React, using inline coordinates and attributes for positioning, sizing, and styling. No interactivity or data binding is present; the face is purely declarative markup.

MMatthew Heywood
93% match
Loading thumbnail…

Smiley Face Part I

This example uses raw SVG to draw a simple smiley face. It presents a yellow circle as the face, with two smaller black circles for eyes and a green circle in the center, all positioned within an SVG canvas. The code creates the shape directly in the index.html file using SVG elements and CSS for basic page styling. React is listed as the framework, but the rendering relies on static SVG markup without any JavaScript computations or data binding.

VVíctor Sánchez
93% match
Loading thumbnail…

Smiley Face Part I

This example draws a simple smiley face inside an SVG canvas. It shows a large yellow circle with a black outline, containing two smaller black circles as eyes. The code uses raw SVG elements—`<svg>`, `<circle>`, and their `cx`, `cy`, `r`, `fill`, and `stroke` attributes—to define the shapes directly in the HTML file. It also loads React via a UMD script tag but does not use any React components or API calls; the visualization is pure declarative SVG markup. The face is centered on a 960 by 500 canvas with no interactivity or animation.

KKvvadzo
93% match
Loading thumbnail…

Smiley Face Part 1

This example shows a basic smiley face drawn as three circles in an SVG: a large yellow face and two smaller eyes, with black strokes for outlines. The code uses plain SVG elements—`<svg>`, `<circle>`, and CSS styling—inside an HTML page to achieve the rendering. The positioning of the eyes is hardcoded via `cx` and `cy` attributes. It demonstrates a minimal static visualization without interactivity or data binding.

JJohn Robison
93% match
Loading thumbnail…

Smiley Face Part I

This example presents a static SVG smiley face consisting of a yellow circle with a black outline and two black eye circles. The visualization is constructed directly in HTML markup using inline SVG elements, with each circle positioned using `cx`, `cy`, and `r` attributes. CSS is applied only to remove the page margin and hide overflow. It demonstrates how to use raw SVG in a bare-bones React page without any additional libraries, serving as a first step toward building a more complex face.

CChukwuka Akibor
93% match
Loading thumbnail…

Smiley face part 1

This example shows a simple smiley face drawn with three circles on an SVG canvas: a large yellow circle for the head and two smaller black circles for eyes. The SVG is rendered directly in the HTML, with CSS controlling the page layout and hiding overflow. It uses the basic SVG `<circle>` element with attributes for position, radius, fill color, and stroke styling, demonstrating static graphic composition without interactive behavior.

VVenkat Ram
93% match