Smiley Face, using HTML

100%

Smiley Face, using HTML

✓ Published1🌍 Public

Last edited Oct 12, 2021

Created on Oct 12, 2021

A simple SVG smiley face rendered directly in HTML, with a large yellow circle for the head and two smaller black circles for the eyes, all drawn using basic SVG circle elements. The code sets fixed coordinates and stroke widths to position the face on a 960 by 500 canvas, with the head centered and eyes offset horizontally from the center. The page uses inline SVG markup within an HTML file, with no external libraries, and relies on static, hard-coded values for all shapes and styling.

AI-generated description

Half way toward smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face - Part 1

This example draws a simple smiley face using Scalable Vector Graphics (SVG) directly in an HTML page. It shows a large yellow circle with a black outline as the face, alongside two smaller circles for the eyes, all positioned on a blank white background. The code uses inline SVG elements—specifically `<circle>` with attributes for center coordinates, radius, fill, and stroke—without any JavaScript libraries or data sources. The rendering is static, with no animation, interaction, or additional facial features beyond the eyes.

SSrijan Nayak

92% match

Loading thumbnail…

Smiley face HTML

A yellow circle with two black eyes forms a simple smiley face on a blank page. The face is drawn entirely with SVG primitives, using a large `circle` element with a yellow fill and black stroke for the head, and two smaller black `circle` elements for the eyes. The inline SVG is embedded directly in a minimal HTML document, with body margins removed via CSS to create a clean, full-window display. No additional libraries or data sources are used; the visualization is purely declarative SVG markup.

RRashidi

92% match

Loading thumbnail…

Smiley Part Hello HTML

A smiling face is drawn directly on an SVG canvas using basic shapes: a yellow circle with a thick black outline for the head, and two smaller black circles for the eyes. The example demonstrates static SVG markup within an HTML body, without any dynamic data or JavaScript interactivity. The rendering approach relies entirely on inline SVG elements, with the overall layout fixed at 960 by 500 pixels. The code uses no external libraries, and the styling is limited to hiding page margins and overflow.

SStephanie

92% match

Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline and two smaller black circles for eyes forms a simple smiley face. The SVG is rendered directly in an HTML page using the `circle` element, with the face centered at 960 by 500 pixels. The rendering relies on basic SVG shape attributes for positioning, fill, stroke, and stroke width, with no external data source or processing library involved. The page uses a minimal stylesheet to remove margins and hide overflow, and the code is self-contained within a single `index.html` file.

Sssarowar

91% 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

91% match

Loading thumbnail…

Smiley Face Part 1

A static SVG smiley face rendered directly in HTML. The yellow circle face, black stroke, and two black eye circles are all drawn using explicit SVG `<circle>` elements with fixed pixel coordinates, calculated visually rather than through any data binding or layout logic. No JavaScript libraries are used; the rendering relies solely on the browser's built-in SVG support within a minimal HTML page. The description centers the face at (480, 250) with a radius of 200 and places the eyes symmetrically at offsets of 70 pixels from the center along the x-axis.

LLouis Heimel

91% match

Loading thumbnail…

Smiley face part 1

A yellow circle with a black outline and two black circles for eyes forms a simple smiley face. The SVG uses basic shape elements, with `<circle>` tags for the face and eyes, and CSS styling to set the canvas size and remove page margins. The face is centered on a 960 by 500 pixel canvas, with the main circle having a radius of 245 pixels and the eyes positioned symmetrically. The code directly embeds the SVG markup within an HTML file, using inline attributes for positioning, colors, and stroke widths.

VVanshika Kushwaha

91% match

Loading thumbnail…

Smiley Face

A yellow smiley face rendered as a static SVG drawing. The face consists of a large yellow circle with a black outline for the head, and two smaller solid black circles positioned as eyes on a 960×500 canvas. The code uses raw SVG elements—`circle` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—placed directly in an HTML file with no JavaScript or external libraries. The rendering is entirely declarative, showing a simple data-visualization-free illustration using only inline SVG markup.

KKonstantinos Kotsiaridis

91% match