Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Apr 9, 2022

Created on Apr 9, 2022

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.

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static yellow smiley face drawn with three SVG circles: one large circle for the head and two smaller circles for the eyes, all centered on a 960-by-500 canvas. The head uses a yellow fill with a black stroke, while the eyes are plain black circles. The code relies solely on raw SVG elements—`<svg>`, `<circle>`, and their attributes—without any JavaScript libraries or D3.js functions. The rendering is built directly in the HTML file, with no data source or dynamic behavior; it simply displays the face as a fixed visual composition.

Ffmparantean@yahoo.com

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example creates a basic smiley face using SVG shapes coded directly in an HTML file. It shows a large yellow circle with a black border as the head, alongside two smaller black circles for eyes. The code uses no JavaScript libraries, instead relying on raw SVG elements like `<circle>` with inline attributes for positioning and styling. The rendering approach is static SVG, with the face centered at 480,250 and eyes offset horizontally on either side.

RRShailza

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

Loading thumbnail…

Fork of Let's Make a Face Part I

This example partially constructs a smiley face using a yellow circle for the head and two smaller circles for the eyes, leaving the mouth unfinished. It is built with raw SVG elements—a `circle` for the face and two additional `circle` elements for the eyes, all positioned via explicit `cx` and `cy` attributes. The SVG is rendered inline within an HTML page, using a 960x500 canvas with a black stroke on the head. The code relies on standard SVG markup rather than a JavaScript library.

EEnoch Ssentumbwe

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face drawn with two outer circles and two eye circles, built from raw SVG markup inside an HTML page. The face is centered on a 960 by 500 canvas, with a yellow head stroked in black and two smaller black circles for eyes. The code uses no JavaScript libraries or D3 APIs; instead, it relies entirely on inline `<circle>` elements and SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. The rendering approach is direct SVG, with the page styled to hide margins and overflow.

MmwellsSFMC

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