Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Dec 17, 2021

Created on Dec 17, 2021

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.

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 example shows a simple, static SVG smiley face constructed from three yellow circles with black outlines on a 960 by 500 canvas. It is a fork of the "Let's Make a Face" tutorial, representing a halfway point toward a more complete face, as only the head and two eyes are drawn. The code uses inline SVG elements, including `<circle>` tags, with hardcoded `cx`, `cy`, and `r` attributes to position the shapes, and a `<style>` block sets the body margin to zero and hides overflow. No external JavaScript libraries are used; the rendering is purely declarative SVG markup.

Kkoki1010

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circular face with black outline is drawn on an SVG canvas, showing three circles: one large head and two smaller eyes positioned symmetrically. The rendering uses static SVG elements defined directly in the HTML, without any JavaScript or D3.js interaction. The code sets explicit coordinates and radius values for each circle, with the head centered at (480, 250) and eyes placed at (350, 180) and (600, 180). This example is a fork demonstrating basic SVG shape creation for a smiley face, using only native markup with styling applied through CSS attributes.

Ttdinh09

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

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.

Hhamdi sevketbeyoglu

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

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

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 static SVG face composed of three circles: a large yellow head with a black outline and two smaller black eyes positioned on a light background. The code uses inline SVG elements with explicit pixel coordinates and stroke properties to define the shapes. It renders to a 960 by 500 canvas and represents a simple, non-interactive visualization of a smiley face’s basic geometry. The example is a direct HTML/SVG implementation without any JavaScript libraries.

FFernando C. Filho

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face created with two empty eye circles and a blank mouth area, rendered as a static SVG. The code draws a large yellow circle with a black stroke for the head, then places two smaller unfilled circles as eyes at fixed coordinates. It uses inline SVG elements within an HTML document, with no JavaScript or external libraries. The page hides the body margin and overflow to display the face centered at 960 by 500 pixels.

PPaul Giese

95% match