Making a Smiley Face with CSS

100%

Making a Smiley Face with CSS

✓ Published1🌍 Public

Last edited Jul 3, 2021

Created on Jul 2, 2021

This example illustrates the classic "hello world" of graphics programming: a yellow circle adorned with two smaller black circles to form a smiley face, rendered as an inline SVG. The page uses plain HTML and JavaScript, with CSS setting the body margin to zero and hiding overflow. The visual is constructed entirely from three `<circle>` elements whose positions, radii, and colors are hardcoded within the SVG tags, demonstrating basic SVG markup. A console statement logs a greeting, hinting at future JavaScript interactions.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Hello HTML

This example shows a simple yellow circle with two smaller black circles, forming a basic smiley face rendered in SVG. It demonstrates the minimal structure of an HTML page that combines CSS for styling and JavaScript for interactivity, though no JavaScript logic is implemented here. The visualization uses raw SVG elements—specifically `<circle>` tags—within an inline `<svg>` viewport sized 960 by 500 pixels. The CSS sets the body margin to zero and hides overflow, while the SVG itself applies attributes like `fill`, `stroke`, and `stroke-width` directly to the shapes.

Jjismis

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

89% match

Loading thumbnail…

Smiley Face

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.

RRahul Raveendran

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

89% match

Loading thumbnail…

Creating a smiley face

This example shows a simple smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The head is drawn with a black stroke and a fill of yellow, while the eyes use only a black fill. The code uses plain SVG elements rendered directly in HTML, with CSS styling applied to remove page margins and hide overflow. The face is centered using explicit x and y coordinates (cx and cy) and sized with radius attributes, with no interactive or animated behavior.

NNarottam Medhora

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

88% match

Loading thumbnail…

Hello html

This example shows a simple smiley face rendered as three SVG circles on a yellow background. The HTML page uses plain CSS to remove the default body margin and hide overflow, while the SVG markup defines each circle with explicit coordinates, radius, and stroke properties. The title and basic document structure come from standard HTML, with the visual output handled entirely by the browser’s built-in SVG rendering. JavaScript is not used in the visible code; the example relies solely on static markup and minimal styling.

DDanyalMazhar

88% match

Loading thumbnail…

Hello HTML

This example shows a simple, hand-coded smiley face rendered as two black circles for eyes inside a larger yellow circle with a black outline, drawn on a blank white canvas. The visualization is built using the SVG element embedded directly in an HTML page, with CSS in the `<style>` tag setting the body margins and overflow. No data source or external libraries are used, and the SVG positions are all hard-coded coordinates for the 960 by 500 viewport.

MMustafap0lat

88% match