Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Mar 16, 2021

Created on Mar 16, 2021

A static SVG face renders a yellow circle with black stroke as the head, plus two smaller solid-dark circles for eyes. The code manually positions these shapes using hard-coded `cx`, `cy`, `r`, `fill`, and `stroke` attributes within an inline `<svg>` element sized 960 by 500. It provides a basic, unfinished smiley-face composition, with the mouth omitted, as noted in the README. This example uses no JavaScript libraries or data sources.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face built as a standalone SVG graphic. A large yellow circle serves as the head, outlined with a thick black stroke, while two smaller unfilled circles represent the eyes. The page uses raw SVG elements—`<svg>`, `<circle>`, and inline attributes like `cx`, `cy`, `r`, and `stroke-width`—placed directly in the HTML without any JavaScript libraries. The layout is centered via hardcoded coordinates, and the `README.md` notes the face is only half-complete, indicating a step toward a fuller drawing.

Ccrocsman

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 example shows a static partially completed smiley face drawn with SVG primitives. A large yellow circle with a black stroke forms the head, while two smaller unfilled circles represent the eyes. The code uses raw SVG elements—`<circle>` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—inside an inline `<svg>` block. No JavaScript libraries are employed; the rendering is purely declarative SVG markup, positioned within a 960×500 viewport.

Jjam9501

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

A fork of an introductory smiley face example renders a yellow circle with black outline and two smaller circles as eyes on an SVG canvas. The static face is drawn using only raw SVG elements—circle tags with explicit cx, cy, r, fill, and stroke attributes—without any JavaScript or data binding. The markup directly positions the face at the center with offset eye coordinates, demonstrating basic SVG shape composition. The example shows a static, non-interactive visualization of a simplified face layout.

Aahadsddq

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

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

95% match