Let's Make a Face Part II

100%

Let's Make a Face Part II

✓ Published0🌍 Public

Last edited Feb 16, 2020

Created on Feb 16, 2020

A partially completed smiley face is drawn as a static SVG graphic on a yellow circle with black stroke. The face includes two dark eye circles at fixed coordinates, while the mouth is absent, reflecting the “half way” state described in the readme. The implementation uses raw SVG elements—`circle` shapes with specified `cx`, `cy`, and `r` attributes—inside an inline `<svg>` tag with a 960 by 500 viewport. No JavaScript libraries or data sources are involved; the rendering is purely declarative SVG markup.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face Part I

A static SVG drawing of a yellow face with two eyes on a black-outlined circle. The code uses raw SVG markup, positioning a central `<circle>` for the head and two smaller `<circle>` elements for the eyes, with hard-coded coordinates and stroke styling. This first part of a tutorial shows a half-finished smiley, omitting the mouth.

CCurran Kelleher

92% match

Loading thumbnail…

Let's Make a Face Part I

A large yellow circle rendered in SVG sits at the center of a 960-by-500 canvas, surrounded by a thick black stroke to form the base of a face. Two smaller black circles, positioned to the left and right of the center, represent eyes, leaving the mouth unfinished. The example uses inline SVG elements—`circle` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—to demonstrate a static, half-completed smiley face, with no interactive or animated behavior present.

Aahmedoury

92% match

Loading thumbnail…

Let's Make a Face Part I

This visualization shows a partial construction of a smiley face using three SVG circles: a large yellow outer circle with a black border, and two smaller solid black circles for eyes. It is an intermediate step toward the full face, lacking a mouth. The code embeds the circles directly in an HTML file using inline SVG elements with absolute coordinates. The layout is calculated with explicit `cx`, `cy`, and `r` attributes, positioning the eyes symmetrically around the center of the face, and the page is set to full-bleed with hidden overflow.

Iillus0r

91% match

Loading thumbnail…

Let's Make a Face Part I

This example shows a partially constructed smiley face rendered as an SVG graphic. A large blue circle forms the head with a black stroke, while two larger white-ringed circles represent the eye sockets, each containing a small white filled circle for the pupil. The face is drawn directly using SVG elements within an HTML page, positioning each circle with explicit `cx`, `cy`, and `r` attributes. The rendering relies on the browser’s native SVG support, with no JavaScript libraries or data sources involved.

Jjust67

91% match

Loading thumbnail…

Let's Make a Face Part I

This example shows the first step toward building a smiley face, with a yellow circular head and two black-outlined eyes positioned symmetrically on a white background. The static SVG scene is constructed directly using inline `<circle>` elements within an `<svg>` tag, specifying coordinates, radii, fill colors, and stroke properties. No JavaScript libraries or data sources are involved; the rendering relies solely on SVG markup and the browser’s native support. The face remains incomplete, hinting at a future part that will likely add a mouth or other features.

Sspringsaga

90% match

Loading thumbnail…

Let's Make a Face Part I

Two yellow circles with black outlines serve as eyes for an unfinished face drawn on an SVG canvas. A large yellow circle with a thick black stroke forms the head, while two smaller solid yellow circles sit symmetrically to the left and right of center. The code uses raw SVG elements—`circle` with `cx`, `cy`, `r`, `fill`, and `stroke` attributes—embedded directly in HTML, with no JavaScript libraries or data binding. The visualization is a static, hand-coded step toward a smiley face.

Pp-d-c

90% match

Loading thumbnail…

Let's Make a Face Part I

A static SVG smiley face rendered as a simple data-visualization exercise. The code uses raw SVG circle elements to draw a yellow head with a black outline and two black eyes, positioned via explicit `cx`, `cy`, and `r` attributes. The face is centered on a 960 by 500 pixel canvas, with the head radius and eye coordinates manually calculated from the center point and stroke width. No external libraries or JavaScript APIs are used; the visualization relies entirely on declarative SVG markup in the HTML file.

SSundaram Agnihotri

90% match

Loading thumbnail…

Let's Make a Face Part I

A first step toward building a smiley face with SVG, this visualization draws a yellow circle with a black outline as the head, then adds two smaller black circles for eyes. The SVG uses explicit `cx`, `cy`, and `r` attributes to position the head and eyes, with `fill` and `stroke` styling for colors. The code sets the viewport to 960 by 500 pixels using an inline `<svg>` element, and the eyes sit symmetrically around the vertical center, leaving the mouth for a later part.

YYoram

90% match