Skip to main content
SimilarExport ZIP
100%

HTML Smiley

✓ Published0🌍 Public
Mmartin-turcotte
Last edited Apr 1, 2021
Created on Apr 1, 2021
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Hello HTML

This example shows a simple SVG smiley face drawn directly in HTML. It uses raw SVG elements—three circles—to compose the face, with a large yellow circle for the head and two smaller black circles for the eyes. The page is styled with minimal CSS to remove margins and hide overflow. The code relies on basic HTML, CSS, and JavaScript, with no external libraries or data sources, and is rendered using the browser’s built-in SVG support.

Ppaulmap
93% match
Loading thumbnail…

This is a Smiley Face

This example draws a simple smiley face using SVG circles. A large yellow circle forms the head, while two smaller black circles serve as eyes, all positioned within a 500 by 960 viewport. The visualization is built with plain HTML and CSS, using SVG `circle` elements to render each shape statically without animation or data binding.

DDraconis1992
92% match
Loading thumbnail…

Hello HTML

This example shows a simple SVG smiley face composed of three circles on a yellow background, rendered within a fixed 960 by 500 pixel canvas. The page is a bare minimum HTML document that includes a heading and embeds the graphic directly. It uses raw SVG markup with circle elements, setting their center coordinates, radii, fill colors, and stroke properties. The page also imports the React library from a Content Delivery Network, though the visualization itself does not depend on React for its rendering.

OOlayemi
92% match
Loading thumbnail…

Hello HTML

This example renders a simple smiley face using React and SVG. It draws three circles directly in the JSX markup: a large yellow face with a black stroke and two smaller circles for eyes. The SVG viewport is 960 by 500 pixels, with the face centered. The code uses raw SVG elements within an HTML file that includes React from a CDN, though it does not apply any React-specific rendering logic or state.

JJJohnson1991
92% 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
92% match
Loading thumbnail…

Smiley Face 1

This example displays a simple smiley face made of three SVG circles: one large yellow circle for the face and two smaller black circles for the eyes. The shapes are drawn directly in the HTML markup with hardcoded coordinates and styling. React is loaded from a CDN in the page, though the code only logs the React object to the browser console and does not use it for rendering. The SVG canvas is set to 960 by 500 pixels, with the face centered horizontally.

Rrmanonl
92% match