Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
HHoang Dang Khanh
Last edited Jun 16, 2022
Created on Jun 16, 2022
Forked from HTML Starter

A yellow circle with a black outline forms the face, centered within an SVG canvas. Two smaller black circles positioned on the upper half serve as eyes, creating a simple smiley face icon. The page is a minimal HTML document that uses raw SVG elements—`circle` tags with `cx`, `cy`, and `r` attributes—to draw the shapes, with CSS setting the body to fill the viewport. No JavaScript or external libraries are involved; the visualization relies entirely on static SVG markup.

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

A yellow SVG circle with two smaller black circles forms a simple smiley face on a blank canvas. The face is centered within a 960-by-500 viewport, using static SVG elements without animation or interaction. The code directly creates three `<circle>` elements—one large yellow face and two black eyes—using plain SVG markup in an HTML file. It does not rely on any JavaScript visualization libraries or data sources, as the rendering is purely declarative and hard-coded.

YYoHoGimmerUrCode
95% 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 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.

PPaula Donoso
93% 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
Loading thumbnail…

Smiley face 1

A yellow smiley face with black outlines is drawn on an SVG canvas. Two smaller black circles form the eyes, while a wide yellow circle with a thick stroke serves as the face. The page uses plain HTML, CSS, and JavaScript within a React starter template. It renders static SVG elements with explicit coordinates and attributes, demonstrating basic vector shape composition without interactive behavior or data binding.

SSoumya0305
93% match
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
93% 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

A yellow circle with two smaller black circles forms a simple smiley face, centered within a 960-by-500 SVG canvas. The face itself is rendered as a primary `<circle>` element with a yellow fill and black stroke, while the eyes are separate black-filled `<circle>` elements positioned symmetrically. The example uses raw SVG markup directly in the HTML file, with no JavaScript libraries or data sources, relying solely on static circle coordinates and styling to achieve the composition. This minimal implementation demonstrates basic SVG shape and attribute usage without external dependencies.

CChristopher Cleland
93% match