1. Face Part I using HTML, CSS and SVG

100%

1. Face Part I using HTML, CSS and SVG

✓ Published0🌍 Public

Last edited Mar 30, 2021

Created on Mar 30, 2021

This example shows a simple yellow face with two black eyes drawn on a white background. The face consists of three SVG circle elements: one large circle for the head and two smaller circles for the eyes, all rendered within an HTML page. The code uses inline SVG styling with CSS properties like `fill`, `stroke`, and `stroke-width` to define the colors and outlines. The body margin is set to zero with hidden overflow to remove page spacing, while the SVG canvas has a fixed width and height of 960 by 500 pixels.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face Part I

A single yellow circle with a thick black outline forms the head of a simple face, centered within an SVG canvas. Two smaller black circles, positioned symmetrically to the left and right, serve as eyes. The page uses a bare HTML document with inline SVG elements to draw the shapes, relying on basic attributes like `cx`, `cy`, and `r` rather than any external JavaScript libraries. The rendering is static and entirely contained in the markup.

Kkripton-it

87% match

Loading thumbnail…

HTML Face

This example shows a simple face rendered as a yellow circle with two eyes using SVG elements. The code draws three circles directly in the SVG markup: a large yellow face with a black outline, and two smaller black eyes positioned symmetrically. It uses basic SVG circle elements with attributes for coordinates, radius, fill, and stroke. The page is styled with CSS to center the graphic and remove margins, while the SVG canvas is set to 960 by 500 pixels. JavaScript is present but unused, and React is listed as the framework though the standalone HTML relies solely on native SVG.

MMark Lam

87% match

Loading thumbnail…

Face Part I

A yellow face rendered as an SVG circle with a thick black outline and two smaller black circles for eyes. The code uses raw SVG elements within an HTML page, styled with CSS for centering and removing page margins. It demonstrates basic React-free SVG composition, with the face drawn directly in the markup. The face is static, showing the use of SVG’s `<circle>` elements for simple geometric data visualization.

RRichard Premvaree

87% match

Loading thumbnail…

Make a Face Part I

A static SVG face built from three circles: a large yellow head with a black outline and two smaller unfilled circles for eyes. The code defines the SVG canvas directly in HTML, positioning the head at the center of a 960 by 500 viewport and placing the eyes symmetrically on either side. The rendering relies on raw SVG circle elements with explicit coordinates and stroke properties. The example demonstrates basic geometric composition and styling within an inline HTML document.

PPatrick Hebner

87% match

Loading thumbnail…

Let's Make a Face Part I

A static SVG face takes shape: a yellow circle with a black stroke forms the head, while two smaller circles serve as eyes. The markup uses raw SVG elements within an HTML file, positioning the head at the center of a 960 by 500 viewport and placing the eyes symmetrically on either side of the vertical axis. The code comments highlight the coordinate calculations for centering and eye offsets, though no animation or interaction is present. The example demonstrates a simple, handmade approach to geometric drawing with basic SVG shapes.

Ggotyou007

87% match

Loading thumbnail…

Hello HTML

This example shows a simple yellow face drawn with a black outline and two black eyes on a blank canvas. The visualization uses an inline SVG element with fixed dimensions of 960 by 600 pixels, placing three circles via the SVG `circle` element. The largest circle serves as the face, with two smaller circles positioned as eyes, all styled directly through SVG attributes like `fill`, `stroke`, and `stroke-width`. The page is minimal HTML with CSS that removes body margins and hides overflow, ensuring the graphic fills the viewport without scrolling. No external libraries or data sources are involved; the rendering relies entirely on native SVG markup.

SShidrath Rahman Haider

86% match

Loading thumbnail…

Making a face

This example shows a simple yellow face constructed from three SVG circles on a 960-by-500 canvas. The face’s head is drawn with a large yellow circle outlined in black, while two smaller black circles serve as eyes, positioned symmetrically around the center. The code uses plain SVG elements (circle) with attributes for radius, center coordinates, fill, and stroke, rendered directly in HTML without any JavaScript libraries or data sources. The visual result is a minimal, static illustration that demonstrates basic SVG shape composition and positioning.

SSahhimanshu7

86% match

Loading thumbnail…

Let's Make a Face Part I (HTML, CSS, SVG)

This example displays a simple smiling face constructed entirely with SVG primitives: a large yellow circle for the head outlined in black, two smaller black circles for eyes, and no mouth. The code uses inline SVG elements within a bare HTML page, setting circles with explicit `cx`, `cy`, and `r` attributes. It relies on pure HTML, CSS, and SVG APIs—no external libraries—and the rendering is done directly by the browser’s SVG engine. A linked YouTube video demonstrates the drawing process, though the page itself is static.

FFábio Correia

86% match