Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Feb 18, 2023

Created on Feb 18, 2023

This example builds a static smiley face using SVG shapes, with three yellow and black circles for the head and eyes. The page renders directly in the browser through inline SVG markup, without any JavaScript libraries or data binding. The code positions each circle using explicit `cx` and `cy` coordinates within a 960-by-500 viewport, and sets the head’s stroke width to create a distinct outline. The accompanying README and video link indicate this is a starting point for a tutorial on constructing more complex facial features.

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 builds a static smiley face from three SVG circles: a large yellow head with a black stroke, and two smaller black eyes. The HTML file defines an SVG canvas at 960 by 500 pixels, positioning each circle explicitly via `cx` and `cy` attributes rather than using any JavaScript or data-binding library. The code comments note the intended placement for future facial features, though only the head and eyes are rendered. No interaction or animation occurs; the visualization relies solely on inline SVG markup within the document.

AAndrew Fletcher

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a static smiley face from primitive SVG shapes, showing a yellow circle head with two smaller dark circles for eyes. The code uses inline SVG elements—`<circle>` tags—within an HTML document and relies on basic SVG styling attributes like `fill` and `stroke`. The face is centered on a 960 by 500 canvas, with fixed pixel coordinates placing the eyes symmetrically around the center. No JavaScript libraries or interaction are used; the visual is purely declarative markup.

GGerhard

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows the first step in building a smiley face with SVG shapes: a yellow circle for the head and two smaller circles for eyes, all positioned on a 960×500 canvas. The code uses raw SVG elements (circle) with attributes for coordinates, radius, fill, and stroke, rendered directly in the HTML. It includes commented calculations for centering elements, and the face remains incomplete—missing a mouth—as indicated by the README. The visualization is static, with no JavaScript interactivity or data binding.

Jjason.borucki.m@gmail.com

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face constructed with three SVG circles: a large yellow head with a black outline, and two smaller unfilled eyes. The code uses plain SVG elements inside an HTML page, with coordinates and stroke widths positioned explicitly via the `cx`, `cy`, `r`, and `stroke-width` attributes. No JavaScript libraries or D3 APIs are required; the rendering depends entirely on the browser’s native SVG support. The data is hard-coded in the markup, and the visual output is a simple, geometric face that stops halfway toward a smile.

MMaria

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example constructs a simple smiley face by layering three SVG circles on a yellow background. The code directly uses SVG markup, positioning the face’s head and two eyes with explicit `cx`, `cy`, and `r` attributes, while a black stroke outlines the head. It shows a static, minimal illustration without interactive behavior or data binding, relying on basic vector shapes to demonstrate geometric composition.

AAnna Fernandes

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

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

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

94% match