Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Jul 4, 2021

Created on Jul 4, 2021

A simple SVG face is drawn on a 960 by 500 canvas, using a large yellow circle for the head and two smaller black circles for eyes. The code sets the central circle’s position with absolute coordinates and a 245-pixel radius, applying a ten-pixel black stroke, while the eyes are placed symmetrically around the center. This static example, part of a “Let's Make a Face” tutorial, demonstrates basic shape composition with raw SVG markup and inline styling, with no JavaScript or external libraries involved.

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 face composed of a yellow circle for the head and two smaller circles for the eyes, all drawn directly in the markup. The face is centered at 960 by 500 pixels, with a black stroke outlining the head. The code uses raw SVG elements—`circle` tags with attributes for position, radius, fill, and stroke—rather than any JavaScript library or data-driven approach. The rendering is fully declarative, with no interaction or animation, and the title references the “Let’s Make a Face” tutorial series.

Ccrazygaurab

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I complete

A static SVG face built from basic geometric shapes uses three circles to form a yellow head and two black eyes on a 960 by 500 canvas. The code sets the face’s position and size through explicit `cx`, `cy`, and `r` attributes, with the head’s stroke width calculated to align its edge precisely. This example demonstrates foundational SVG markup for constructing simple illustrations without any JavaScript libraries or data binding.

MMuhammed AbuOdeh

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face, composed of a yellow circle with a black outline, sits centered on the canvas. The face displays two smaller black circles for eyes, positioned symmetrically around the center. The markup explicitly sets both the SVG dimensions and the circle coordinates, using inline styling for the fill and stroke properties. The page’s HTML structure and CSS reset body margins, producing a full-window visual without any interactive or animated behavior. The code relies solely on native SVG elements within the HTML document.

AAbolhasan Zaman

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A bright yellow circle with a thick black stroke fills the center of an SVG canvas, forming a simple face. Two smaller black circles are positioned on either side of the face for eyes. The code uses raw SVG elements (`circle`) to render the shapes, setting coordinates and radii directly. This example demonstrates basic geometric composition without data binding or interaction, focusing on SVG styling and layout.

Hhimchan94

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

Hhimchan94

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A simplified cartoon face rendered in SVG shows a large yellow circle head with black outline and two blank black eye circles. The code builds the illustration directly with inline SVG elements, using explicit `circle` tags for the head and eyes. The face is incomplete, as the title suggests, with no mouth drawn. The markup sets a fixed 960 by 500 pixel canvas and centralizes the head at coordinates 480,250. This example demonstrates basic SVG shape construction without JavaScript libraries or data processing, relying solely on static SVG markup for its visual output.

Ppatrup

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face is drawn on a yellow circle with two black eye circles, leaving the mouth unfinished as a work-in-progress example. The code uses plain HTML and SVG elements, including `<circle>` tags with fixed `cx`, `cy`, `r`, and `stroke` attributes, within a 960×500 viewport. It demonstrates basic vector shape composition without any JavaScript libraries or animation, rendering directly through the browser’s SVG support.

Ttvhorn

94% match