Smiley - Part I - HTML

100%

Smiley - Part I - HTML

✓ Published0🌍 Public

Last edited Jan 6, 2022

Created on Jan 6, 2022

This example demonstrates how to draw a static smiley face using raw HTML, CSS, and JavaScript, rendering two eyes and a head as SVG circles. The code uses inline SVG elements within an HTML page, with styling applied via a CSS rule that removes the page margin. The smiley is constructed by manually positioning each circle element using explicit `cx` and `cy` coordinates within an SVG canvas, without relying on any external libraries or data sources.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Smiley Part I

This example creates a smiley face using two static eye circles and a larger yellow face circle, rendered as SVG elements. The HTML page relies on vanilla JavaScript and CSS to suppress margins and create a clean viewport, with no interactive behavior. The SVG’s `cx`, `cy`, `r`, `fill`, and `stroke` attributes define the geometry and styling, while the 960×500 canvas is drawn directly in the markup.

JJeni Hoyt

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

91% match

Loading thumbnail…

Smile Face Part I

This example displays a simple, static smiley face composed of three circular shapes: a large yellow head and two black eyes. The graphic is rendered as a single SVG element with fixed dimensions, using basic HTML5 markup embedded directly in a webpage. The circles are drawn with the SVG `circle` element, specifying `cx`, `cy`, `r`, `fill`, and `stroke` attributes for positioning and styling. The code relies on no external libraries or JavaScript, only browser-native SVG support via the file’s inline markup, with minimal CSS to remove page margins and hide overflow.

Eeyalsus

91% match

Loading thumbnail…

Smiley Hello HTML

This example uses HTML, CSS, and JavaScript to draw a simple smiling face inside an SVG canvas. It positions yellow and black circles for the face and eyes using explicit x and y coordinates. The page relies on raw SVG elements and inline styles, with CSS hiding the body margin and overflow for a clean, full-window display.

MMerneyMosh

90% match

Loading thumbnail…

Smiley Part I HTML

This example shows the first stage of a smiley face built as a standalone HTML page. A large yellow circle forms the head, with two smaller black circles serving as eyes, all rendered in a fixed 960×500 SVG canvas. The code uses plain SVG elements—`circle` with explicit `cx`, `cy`, `r`, and stroke attributes—styled via inline CSS to hide the page margins. It is a purely static visual, with no interaction or animation, and serves as a baseline for further facial features.

TTyler Brown

90% match

Loading thumbnail…

Smiley face part 1

This example shows a simple smiley face constructed from three SVG circles: a large yellow face with a black stroke, and two smaller black eyes. The HTML page uses inline CSS to remove margin and hide overflow, while the SVG element sets a fixed width and height with hardcoded coordinates. The document uses no external JavaScript libraries, relying solely on raw SVG markup within the HTML file. The comment in the code hints at calculations for eye positioning, but the actual positions are static.

Kkatpyt

90% match

Loading thumbnail…

HTML Smiley

This example shows a simple smiley face drawn as three SVG circles: a large yellow head and two smaller black eyes, all positioned within a 960-by-500 pixel viewport. The code uses plain SVG elements inside an HTML file, with inline CSS to reset the page margin and hide overflow. No JavaScript or data sources are involved; the rendering relies solely on static SVG circle attributes for coordinates, radii, fill, and stroke styling.

Mmartin-turcotte

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

90% match