Let's Make a Face Part I

100%

Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Jan 25, 2020

Created on Jan 25, 2020

A yellow circle with a black outline forms the head of a face, while two smaller black circles serve as eyes. The visualization uses raw SVG elements within an HTML page, with coordinates explicitly calculated to center the face and position the eyes symmetrically. The code directly sets `cx`, `cy`, and `r` attributes on `<circle>` elements, and no external libraries are used. This simple example demonstrates basic SVG shape composition for creating a stylized character.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Let's Make a Face Part I

A yellow circle with a black outline forms a face, flanked by two smaller black circles that serve as eyes. The static SVG composition uses a 960 by 500 canvas, positioning the main face at center with a radius of 245 pixels and each eye at a radius of 50. The code relies on basic SVG `circle` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, all embedded directly in the `index.html` file. No dynamic data or external libraries are involved; the visualization is purely declarative markup.

Ccoobeet

93% match

Loading thumbnail…

Let's Make a Face Part I

Two yellow circles with black outlines serve as eyes for an unfinished face drawn on an SVG canvas. A large yellow circle with a thick black stroke forms the head, while two smaller solid yellow circles sit symmetrically to the left and right of center. The code uses raw SVG elements—`circle` with `cx`, `cy`, `r`, `fill`, and `stroke` attributes—embedded directly in HTML, with no JavaScript libraries or data binding. The visualization is a static, hand-coded step toward a smiley face.

Pp-d-c

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

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

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

92% match

Loading thumbnail…

Let's Make a Face Part I

A single yellow SVG circle with a black stroke forms the head of a smiley face, accompanied by two smaller black circles for eyes. The example demonstrates basic SVG shape rendering within an HTML page, using hard-coded `circle` elements positioned via `cx` and `cy` coordinates. It is the first step toward a complete facial expression, with the mouth intentionally omitted. The code relies on standard SVG markup, not any JavaScript visualization library.

JJjavellana

91% match

Loading thumbnail…

Let's Make a Face Part I

The visualization shows a basic face constructed from three SVG circles: a large yellow circle with a black stroke representing the head, and two smaller black circles representing eyes. The face is incomplete, with the title indicating this is the first step toward a smiley face. The code uses raw SVG elements inside an index.html file, with fixed coordinates in a 960x500 viewport. The rendering is static, relying on SVG's native circle shapes without any JavaScript libraries or data sources.

Zzilvus

91% match