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

100%

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

✓ Published1🌍 Public

Last edited May 6, 2021

Created on May 6, 2021

A simple line-drawing exercise builds a face from three SVG circles: a yellow head with a black outline and two smaller black eyes. The example demonstrates basic SVG geometry and styling using hard-coded coordinates and attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. The HTML file references an external CSS file that resets the page margin and hides overflow. A linked YouTube video provides a tutorial for recreating the face, while the code itself uses only native SVG elements without any JavaScript libraries.

AI-generated description

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

MIT Licensed

Similar vizzes

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

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

90% match

Loading thumbnail…

Let's Make a Face Part I

This example shows a minimal, static SVG face created from three circles: a large yellow circle for the head and two smaller black circles for the eyes. The page is a single HTML file that uses inline SVG elements with explicit `cx`, `cy`, `r`, and `stroke` attributes to define the shapes. The SVG canvas is sized at 960 by 500 pixels, with the head centered at (480, 250) and the eyes placed symmetrically at (350, 180) and (600, 180). No JavaScript libraries are used; it is a pure vector drawing with hardcoded coordinates.

Jjcrr9232

90% match

Loading thumbnail…

Let's Make a Face Part I

This example shows the initial stage of constructing a face with simple geometric shapes, featuring a large yellow circle for the head and two smaller circles for eyes, all rendered directly in SVG. The code uses plain HTML and SVG element declarations within an inline `<svg>` tag, setting explicit coordinates and radii for each circle. The face is centered on a 960×500 canvas, with the head’s stroke and fill colors specified inline. No JavaScript libraries or data sources are involved; the visualization relies solely on static, hard-coded SVG markup to create the basic facial structure.

Llakalia@wpi.edu

89% match

Loading thumbnail…

Let's Make a Face Part I

A yellow circle with a thick black outline serves as a face, and two smaller unfilled circles mark the eyes, leaving the mouth incomplete. This beginner example from the "Let's Make a Face" series uses raw SVG elements—`circle` nodes with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—to build a static, centered composition on a 960-by-500 canvas. The code relies on inline SVG markup directly in the HTML, with no JavaScript libraries or data sources, and renders in the browser via the SVG format.

Aaigioma

89% match

Loading thumbnail…

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

This example demonstrates how to construct a simple, stylized face using only HTML, CSS, and SVG, with no external JavaScript libraries. The page contains an empty `<body>` element, while the face’s visual elements are defined entirely through inline SVG markup within the HTML structure. The video embedded in the README provides guidance on the step-by-step drawing process, but the code itself does not include any interactive behavior or data-driven rendering. It serves as a minimal, static illustration of basic SVG shape composition and CSS styling within a single web document.

440detectives

89% match

Loading thumbnail…

Let's Make a Face Part I

A simple SVG face built from three circles: a yellow head and two black eyes, drawn directly in HTML markup without JavaScript libraries. The head uses a 245-pixel radius centered at (480, 250), with eyes positioned at (350, 180) and (600, 180), each 50 pixels wide. The face lacks a mouth, matching the "Half way towards a smiley face" note in the README. All styling—fill colors, stroke, and stroke width—is applied via inline SVG attributes.

Ddanrungg

89% match

Loading thumbnail…

Let's Make a Face Part I

A static SVG face composed of three circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically. The circles are drawn using raw SVG elements, with coordinates and radii hardcoded directly in the markup. This example uses plain HTML and CSS, with no JavaScript libraries or data sources, to demonstrate basic shape composition and styling within an SVG canvas.

Jjwlam83

89% match