Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Oct 5, 2021

Created on Oct 5, 2021

A static yellow smiley face is drawn on an SVG canvas, with two black eye circles positioned on a larger yellow circular face. The page uses raw SVG elements—`circle`, `fill`, `stroke`, and `stroke-width`—to construct the simple facial geometry, with a black outline around the face and no mouth yet. The SVG is set to 960 by 500 pixels, and the code comments indicate the coordinates are manually calculated, such as centering the face at (480, 250) with a radius of 245. This is a minimal hand-coded example without any JavaScript libraries, serving as the first part of a two-stage face-building tutorial.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This is a static SVG drawing of a yellow smiley face, constructed from three circles. The face is rendered on a 960 by 500 pixel canvas, with a large yellow circle for the head and two smaller black circles for eyes, each positioned symmetrically. The code uses raw SVG markup within an HTML file, setting the body to hide overflow. The example is presented as a fork of the video tutorial "Let's Make a Face Part I," and the comments within the code show the positioning math for the elements.

EEdier Aristizábal

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face built with basic geometric shapes, showing a large yellow circle for the head and two smaller black circles for eyes. The code uses plain SVG elements—`circle`, `stroke`, and `fill`—positioned via hardcoded `cx` and `cy` attributes on a 960 by 500 canvas. It is a minimal, incomplete smiley face that stops short of adding a mouth, illustrating the starting point for a step-by-step tutorial. The rendering is entirely SVG-based with no JavaScript libraries or data sources involved.

WWei Wang

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face constructed from three SVG circles on a yellow face, with two black eye circles positioned on either side of the center. The face is drawn using raw SVG elements—a yellow `<circle>` with a black stroke, and two unfilled `<circle>` elements for the eyes—all laid out on a 960-by-500 canvas. No JavaScript libraries or animation logic are present; the effect relies entirely on the SVG markup and CSS resets to remove page margins. The rendering is purely vector-based, with coordinates hard-coded into the HTML file.

SSebastian Ruggero

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG drawing of a yellow circle with two smaller black circles forms a partial smiley face, missing the mouth. The 960-by-500 pixel SVG canvas centers the face at (480, 250) with a 245-pixel radius, using hardcoded coordinates for the eyes at (350, 180) and (600, 180). The code uses only native SVG elements—`circle` and `svg`—with no JavaScript libraries, directly setting fill, stroke, and stroke-width attributes. This is an incomplete fork of an example from v3, meant as a starting point for building a full face.

WWilson

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A simple SVG face begins as a yellow circle with a black stroke, featuring two smaller black circles for eyes positioned symmetrically around the center. The code directly renders static shapes using SVG elements—`circle` tags for the head and eyes—within an HTML page that hides overflow. This initial step toward a smiley face uses no JavaScript libraries, relying solely on hardcoded pixel coordinates and fixed dimensions of 960 by 500. The result is a minimal, non-interactive illustration in the browser.

Llatifiss

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This simple SVG drawing depicts a yellow face with two black-outlined eyes, rendered on a 960x500 canvas. It is a static, non-animated example, representing an early step in building a smiley face. The code uses raw SVG elements—`circle` tags with specific `cx`, `cy`, and `r` attributes—rather than a JavaScript visualization library. A linked YouTube video accompanies the example, providing additional context.

PPeter Horrack

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static yellow smiley face drawn on an SVG canvas, with a large circular head and two black eyes positioned symmetrically around the center. The rendering uses raw SVG elements—`<circle>` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—defined directly in the HTML. No JavaScript libraries or data-binding APIs are involved; the face is hardcoded as markup, with a 960×500 viewport and a 10-pixel black stroke outlining the head. The title references a video tutorial, but the visualization itself contains no animation or interactive behavior.

SS-Au-Zn

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of a "Let's Make a Face" tutorial shows a simple smiley face built entirely from SVG shapes. A large yellow circle with a black stroke forms the head, while two smaller unfilled circles serve as the eyes. The construction relies on hard-coded pixel coordinates for the center (cx="480") and eye placements (cx="350" and cx="600") within a 960 by 500 canvas. The rendering is static SVG, using inline `<circle>` elements without any JavaScript or data-binding libraries.

Mmadroscla

95% match