Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Aug 2, 2021

Created on Aug 2, 2021

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.

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of "Let's Make a Face Part I" shows a static smiley face built from yellow and black SVG circles. The large 245-pixel-radius circle forms the head, while two smaller circles serve as eyes at fixed positions. The code uses raw SVG elements—circle tags with attributes for center coordinates, radius, fill, and stroke—inside a 960×500 viewport. No JavaScript libraries or data sources are involved; the rendering is purely declarative SVG markup embedded directly in the HTML.

Llit86hlp

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of a face-building tutorial uses an SVG drawing to show a simple smiley face: a yellow circle with a black outline and two smaller circles for eyes. The code specifies the SVG width and height directly, positioning each shape with explicit `cx` and `cy` coordinates, such as the face at (480, 250) with a radius of 245. It renders using the SVG API within an HTML document, with CSS to remove page margins and hide overflow. The example demonstrates static SVG shapes without interactive behavior or additional D3 features.

NNeeraj Verma

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example partially constructs a smiley face using a yellow circle for the head and two smaller circles for the eyes, leaving the mouth unfinished. It is built with raw SVG elements—a `circle` for the face and two additional `circle` elements for the eyes, all positioned via explicit `cx` and `cy` attributes. The SVG is rendered inline within an HTML page, using a 960x500 canvas with a black stroke on the head. The code relies on standard SVG markup rather than a JavaScript library.

EEnoch Ssentumbwe

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

EEnoch Ssentumbwe

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows the initial stage of building a smiley face, displaying a large yellow circle with a black outline and two smaller black circles for eyes. The SVG rendering uses the `<circle>` element with explicit `cx`, `cy`, and `r` attributes to position each shape on a 960 by 500 canvas. The first circle is centered, while the eyes are placed using horizontal offsets from the center, as noted in the HTML comments. The layout is static and does not involve any scripting libraries or data sources.

Oolirek1

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example draws a simple smiley face using SVG primitives inside an HTML page. It shows a large yellow circle with a thick black stroke as the face, alongside two smaller black circles positioned for the eyes. The code directly constructs the `<circle>` elements within a 960-by-500 SVG canvas, using explicit `cx`, `cy`, and `r` attributes to place each shape. No JavaScript libraries are used; the rendering relies solely on static SVG markup.

MMatthewNunes

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from SVG circles: a large yellow head with a black stroke, two smaller circles for eyes, and an implied mouth in progress. It renders in an SVG container using hard-coded coordinates for layout, with no interactive behavior. The code uses basic SVG elements like `<circle>` and inline styling, and mentions center positioning and eye offset in comments to guide placement. A linked video tutorial accompanies the illustration.

Ccptamang

95% match