Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Apr 21, 2022

Created on Apr 7, 2022

This example shows a simple yellow smiley face drawn on a blank SVG canvas, with two black eye circles positioned on a larger face circle. The face consists of three SVG `<circle>` elements: a large yellow circle with a black stroke for the head, and two smaller black circles for eyes. It uses raw SVG markup within an HTML file, with no JavaScript libraries or data sources, relying solely on explicit coordinate attributes (cx, cy, r) for placement.

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 yellow smiley face created with two empty eye circles and a blank mouth area, rendered as a static SVG. The code draws a large yellow circle with a black stroke for the head, then places two smaller unfilled circles as eyes at fixed coordinates. It uses inline SVG elements within an HTML document, with no JavaScript or external libraries. The page hides the body margin and overflow to display the face centered at 960 by 500 pixels.

PPaul Giese

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face drawn on a 960-by-500 SVG canvas. Two solid black circles serve as eyes, while the large yellow circle with a black stroke forms the head; the mouth is not yet drawn, as noted in the README. The rendering relies on raw SVG elements—`circle` with `fill` and `stroke` attributes—defined directly in the HTML, with CSS hiding scrollbars and resetting margins. The code uses no external libraries, only native SVG markup for static vector shapes.

RRayed12

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face, constructed from three SVG circles: a large yellow face with a black outline and two smaller black circles for eyes. The face is centered on a 960 by 500 canvas, with the head positioned at the midpoint and the eyes offset horizontally. Rendered directly via inline SVG elements in the index.html file, the code uses no external libraries, relying on basic shape attributes like `cx`, `cy`, `r`, and `stroke-width` to define the visual. The accompanying README notes it is only "half way towards a smiley face," as the mouth is absent.

Llizard1111

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a minimalist yellow smiley face constructed from three SVG circles on a 960 by 500 canvas. The main face is a large yellow circle with a black stroke, positioned at the center, while two smaller black circles serve as eyes. The code uses raw SVG elements within an HTML document, with static coordinates for the circles and basic styling through inline attributes. The rendering is a simple, static vector illustration without animation or interactivity.

Jjanek206

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face drawn as three circles inside an SVG, with a black outline and two eyes positioned symmetrically around the center. The face is rendered at 960 by 500 pixels, using hard-coded coordinates rather than data-driven binding. It relies on basic SVG circle elements and inline attributes for positioning and styling, with no JavaScript libraries. The design is a static illustration, serving as a minimal starting point for a facial visualization.

AArkaporn Poonkwan

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face constructed from three SVG circles on a yellow face, with two black eye circles positioned on either side of the center. The face is drawn using raw SVG elements—a yellow `<circle>` with a black stroke, and two unfilled `<circle>` elements for the eyes—all laid out on a 960-by-500 canvas. No JavaScript libraries or animation logic are present; the effect relies entirely on the SVG markup and CSS resets to remove page margins. The rendering is purely vector-based, with coordinates hard-coded into the HTML file.

SSebastian Ruggero

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow circle with two smaller black circles positioned as eyes, forming the first step toward a smiley face. The SVG rendering uses hardcoded coordinates and radii rather than a data-driven approach. The code directly sets circle elements with cx, cy, and r attributes through inline SVG markup, with no external JavaScript libraries or dynamic data sources involved. The face is deliberately incomplete, stopping at the eyes without a mouth.

JJean David

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