Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Feb 26, 2021

Created on Feb 26, 2021

This fork of "Let's Make a Face" uses raw SVG to draw three stationary circles: a large yellow face with a black outline and two smaller black-outlined eyes. The code hardcodes circle coordinates and radii (e.g., r='245' for the face, r='50' for the eyes) directly in the HTML, with no dynamic data or interaction. It renders via the SVG element in a 960x500 viewport, with CSS to hide page margins. The example demonstrates basic circle-based shape construction without using any JavaScript libraries or data-binding frameworks.

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 simple SVG face made of three circles sits centered on a yellow background. The code draws a large yellow circle with a black stroke for the head, then places two smaller black circles as eyes at fixed coordinates. This example uses raw SVG elements—`circle` tags with explicit `cx`, `cy`, `r`, and `fill` attributes—without any JavaScript libraries or data binding. The rendering is static, with all geometry hardcoded in the HTML, and the page hides scrollbars via CSS.

Ttssytrack

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face Part I” shows three circles on an SVG canvas: a large yellow circle outlined in black, plus two smaller unfilled circles positioned symmetrically above its center. The drawing is created directly in an HTML file using inline SVG elements (circle, cx, cy, r, fill, stroke). The code explicitly comments the geometric calculations for vertical centering and eye placement, and the page hides body scrollbars for a clean presentation. No JavaScript or external library is used.

AAndy Ngo

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of "Let's Make a Face Part I" uses raw SVG markup within an HTML page to draw a basic cartoon face. The visualization shows a large yellow circle with a black stroke for the head, plus two smaller circles for eyes at different sizes and positions. The SVG code defines explicit coordinates for each circle, with the head centered at 480,250 and a radius of 205 pixels. No JavaScript libraries or data sources are involved; the rendering relies entirely on static SVG elements and the browser's native SVG support.

DDefve

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static face built from three SVG circles: a large yellow circle for the head with a black outline, and two smaller black circles positioned as eyes. The code uses raw SVG elements within an HTML document, with no JavaScript or external libraries. The face is centered on an 960 by 500 pixel canvas, and the eye positions are determined by manually hardcoded coordinates, not calculated or animated. The rendering is a direct, declarative SVG representation of the shapes.

Oobaidallah alqurshi

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face made of three circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically. The code uses inline SVG elements within an HTML document, with circle coordinates computed relative to the center. It is a simple SVG rendering with no JavaScript or data binding, demonstrating basic geometric composition in a fixed 960 by 500 viewport.

Aanakomissaroff

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face built from three circles: a large yellow head with a black outline, and two smaller black eyes. The example demonstrates basic SVG shape rendering and coordinate placement within a fixed 960 by 500 viewport, using explicit `cx`, `cy`, and `r` attributes. It is a simple, non-interactive illustration of declarative vector drawing, with no JavaScript, data binding, or animation logic present in the code.

VValverDEV

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A simple SVG face is drawn using three circles: a large yellow circle with a black stroke for the head, and two smaller black circles for eyes. The page is minimal, with no visible data source or interaction. The code directly defines the circle positions and radii in the markup, using SVG and standard HTML. The rendering approach relies on hard-coded coordinates within an `svg` element.

Aarnoldgh

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face built from three circles: one large yellow circle with a black stroke forms the head, while two smaller black circles serve as eyes. The example demonstrates a minimal hand-coded approach using inline SVG elements—circle coordinates are explicitly positioned with `cx`, `cy`, and `r` attributes, and the rendering relies solely on the browser’s SVG support. No JavaScript libraries are involved, and the data is hardcoded directly in the HTML markup. The result is a simple, non-interactive illustration of basic geometric composition.

MMaher Ali Rusho

93% match