Skip to main content
SimilarExport ZIP
100%

1.-Happy face (html)

✓ Published1🌍 Public
JJorge MataH
Last edited Oct 11, 2021
Created on Oct 8, 2021
Forked from Hello HTML

A single yellow circle with a black outline and two smaller black circles creates a simple happy face. The face is drawn using an SVG element that is 960 by 500 pixels. The main circle is centered with a radius of 240, while the eyes are positioned to the left and right of the center, using the `cx`, `cy`, and `r` attributes. The example uses raw SVG markup directly in an HTML file, with no external JavaScript libraries or data sources.

AI-generated description

Let's Make a Face I.

MIT Licensed

Similar vizzes

Loading thumbnail…

Happy face

A yellow happy face is drawn on a white background, featuring two black eyes and a red smile. The SVG rendering uses primitive shapes: the head is a circle with a thick black stroke, the eyes are smaller filled circles, and the mouth is a path defined by a quadratic Bézier curve (using the `d` attribute with `M`, `Q`, and `Z` commands). No external data or JavaScript libraries are used; the design is static and hardcoded in the HTML markup.

YYash_Science
87% match
Loading thumbnail…

EXAMPLE FOR HAPPY FACE Part 1

A simple SVG drawing depicts a happy face, composed of a large yellow circle with a black stroke as the head, and two smaller black circles as eyes. The code creates the shapes using raw `<circle>` elements within an SVG container, positioning them with explicit `cx` and `cy` attributes. The page is styled to remove margins and hide overflow. The visualization serves as a basic, static example of geometric shape composition without any interactive or data-driven elements.

Bblackfoda
87% match
Loading thumbnail…

Hello HTML

This example shows a simple yellow circle with two black eyes, forming a basic smiley face on a blank white background. The SVG drawing uses two overlapping circle elements for the face and eyes, all rendered with explicit stroke and fill attributes. The code defines three separate `<circle>` tags inside a fixed 960×500 SVG viewport, with the body’s CSS removing margins and hiding overflow. No JavaScript libraries are used; the visualization relies entirely on plain HTML and SVG markup.

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

smiley face

A yellow circle with a black outline and two black inner circles forms a simple smiley face on a blank background. The SVG is rendered at 960 by 500 pixels, with the face centered and all shapes drawn using the `svg` namespace. The outer circle uses `cx`, `cy`, `r`, `fill`, and `stroke` attributes, while the eyes are positioned via absolute coordinates. The minimal HTML page contains no external libraries or scripts, relying solely on inline SVG elements and basic CSS to hide page margins.

EEkuremaro
85% match
Loading thumbnail…

Smiley Face Part I

A single yellow circle with a thick black outline and two smaller black circles inside forms a basic smiley face. The example uses raw SVG elements—specifically `<circle>` tags—within an HTML page to compose the static graphic. The code sets the main face’s radius to 245 pixels, positions the eyes at fixed coordinates, and relies on the browser’s default black fill for the pupils. No JavaScript or external libraries, such as D3, are employed; the rendering is purely declarative SVG markup. The fixed canvas size is 960 by 500 pixels, with the face centered horizontally.

GGregS1290
85% match
Loading thumbnail…

#1 smiley face

A single yellow smiley face rendered as an SVG graphic. The face consists of a large yellow circle with a black outline, containing two smaller black circles for eyes. The code uses basic SVG elements—`<svg>`, `<circle>`, and CSS styling—to draw the shapes directly in the HTML page. No JavaScript libraries or external data sources are involved; the visualization is purely static markup.

Mmohamedabbessi
85% 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
85% match