Smiley Face Part I (with html,css and svg)

100%

Smiley Face Part I (with html,css and svg)

✓ Published1🌍 Public

Last edited Jan 25, 2020

Created on Jan 25, 2020

This example displays a simple cartoon smiley face drawn with scalable vector graphics. The face consists of a large yellow circle, two eyes, and a red circular mouth, all rendered using inline SVG elements within an HTML page. The page uses pure HTML and CSS, with no JavaScript, to style the SVG shapes. CSS rules define the background color and override the fill colors of the eyes and mouth to green, while the SVG attributes set the initial positions, radii, colors, and stroke widths for each circle.

AI-generated description

Smiley Face Part I (with html,css,svg)

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

93% match

Loading thumbnail…

Smiley Face Part 1

This example draws a simple smiley face using Scalable Vector Graphics (SVG) within a minimal HTML page. The face consists of a large yellow circle with a black outline, representing the head, and two smaller unfilled circles as eyes, positioned symmetrically on the upper half. The rendering relies on native SVG elements such as `<circle>` and attributes like `cx`, `cy`, `r`, `fill`, and `stroke-width`. The page uses an embedded stylesheet to remove margins and hide overflow, ensuring the graphic fills the viewport cleanly without any scripting or external libraries.

CChristy Grothues

92% match

Loading thumbnail…

Smiley Face Part I

This example shows a static, hand-coded SVG smiley face, drawn on a 960-by-500 canvas. The rendering uses raw SVG primitives—three `<circle>` elements for the yellow face and two black eyes—all positioned via explicit `cx`, `cy`, and `r` attributes. The face’s yellow fill and black stroke are set through inline SVG presentation attributes. The code contains no scripting or external libraries; it relies solely on the HTML5 `<svg>` element and its built-in shape rendering. The page is styled with minimal CSS to remove margins and hide overflow. The result is a simple, vector-based icon that is part one of a two-part smiley-face construction.

PPik Yin

92% match

Loading thumbnail…

Smiley Face Part I

This example shows a simple smiley face constructed from three SVG circles: a large yellow circle for the face and two smaller black circles for the eyes. The graphic is encoded directly in the HTML file using SVG elements with attributes for position, radius, fill, and stroke. The page relies on raw SVG markup, with CSS setting body margin and overflow, and a minimal JavaScript script tag that contains no code. The rendering approach is immediate, with no external libraries or data source involved.

YYohR

91% match

Loading thumbnail…

Smiley Face Part One

This example shows a simple smiley face made from three SVG circles: a large yellow face and two black eyes. The page uses plain SVG elements within an HTML file, with a body margin of zero and hidden overflow to present the drawing cleanly. The SVG canvas is 960 by 500 pixels, and all circles are positioned with explicit coordinates and styled with fill and stroke attributes. No JavaScript libraries or data sources are involved; the rendering relies solely on static SVG markup.

TTushar Dangayach

91% match

Loading thumbnail…

Smiley Face Part 1

A hand-drawn style smiley face is rendered as a static SVG graphic, composed of a yellow circular head, two white eye patches with black pupils, and a black horizontal line for a mouth. The code uses plain SVG elements—`circle`, `line`, and `g`—with CSS classes for styling, positioning the shapes via the `transform` attribute. The face is centered in a 400-by-400 pixel container, with the head and pupils sized through radius and translation values. No animation or interaction is present; the example demonstrates basic SVG shape composition and attribute-based layout.

Ssawyee

91% match

Loading thumbnail…

Smiley Face Part 1 HTML

This example shows a yellow smiley face composed of three basic SVG shapes on a blank canvas. It depicts a large yellow circle with a black outline for the face, and two smaller solid circles for the eyes, all centered within a 960 by 500 pixel viewport. The visualization is built using raw HTML and inline SVG elements—specifically, three `<circle>` tags—with styling applied through a minimal embedded CSS rule that removes page margins and hides overflow. The code uses a static SVG rendering approach, with no JavaScript libraries, external data, or interaction; it is a pure static drawing.

CCharlottePRJ

91% match

Loading thumbnail…

Smiley Face Part 1

This example shows a simple yellow smiley face drawn on an SVG canvas, featuring a large circular head with two small black circles for eyes. The face lacks a mouth or other features, presenting only the basic foundation of the character. The visualization uses plain SVG elements, including `<circle>` tags with attributes for radius, position, fill color, and stroke, all rendered within an HTML page using inline CSS to remove margins and hide overflow. The static image is centered on a 960 by 500 pixel canvas using hard-coded coordinates.

AAman Singh

91% match