Let's Make a Face Part I

100%

Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Jul 19, 2020

Created on Jul 19, 2020

A first step toward a smiley face, this SVG drawing shows a yellow circle with a black outline, flanked by two smaller empty circles for eyes. The code positions these shapes using absolute coordinates within an `svg` element sized 960 by 500. Each circle is defined with the SVG `circle` tag, setting `cx`, `cy`, `r`, and fill and stroke properties directly in the markup. The work uses no JavaScript or external libraries, relying purely on static SVG markup for rendering.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Let's Make a Face Part I

A single yellow SVG circle with a black stroke forms the head of a smiley face, accompanied by two smaller black circles for eyes. The example demonstrates basic SVG shape rendering within an HTML page, using hard-coded `circle` elements positioned via `cx` and `cy` coordinates. It is the first step toward a complete facial expression, with the mouth intentionally omitted. The code relies on standard SVG markup, not any JavaScript visualization library.

JJjavellana

93% match

Loading thumbnail…

Let's Make a Face Part I

A single yellow circle with a black outline sits centered on a white SVG canvas, flanked by two smaller black circles positioned as eyes. The work is the first step toward constructing a smiley face, showing only the head and eyes without a mouth. The rendering relies on basic SVG primitives—`circle` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—defined directly in static HTML. No JavaScript libraries or data sources are involved; the composition is purely declarative markup.

HHaniAlHawasli

92% match

Loading thumbnail…

Let's Make a Face Part I

This example shows the first step toward building a smiley face: a large yellow circle with a black outline serves as the face, and two smaller black circles represent eyes. The SVG is rendered using plain HTML markup, with coordinates specified directly in the `<circle>` elements rather than through a JavaScript library. The face is centered on a 960 by 500 canvas, with the eyes positioned symmetrically around the center. No interactive behavior or data binding is present; the visualization is purely static, relying on SVG’s native shape-rendering capabilities.

AArthur Gailes

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

92% match

Loading thumbnail…

Let's Make a Face Part I

This example draws the first step toward a smiley face in a 960 by 500 pixel SVG canvas. It renders a large yellow circle with a black stroke as the head, plus two smaller unfilled circles positioned as the eyes. The code uses raw SVG elements—`circle` tags with explicit `cx`, `cy`, and `r` attributes—within an embedded `index.html` file, with no external JavaScript libraries. The placement of the eyes is computed from the canvas center and a fixed offset, though the coordinates are written directly as attributes.

Aassafali

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

92% match

Loading thumbnail…

Let's Make a Face Part I

This example shows the first step in constructing a smiley face using Scalable Vector Graphics (SVG). A large yellow circle with a black stroke forms the head, while two smaller black circles serve as eyes, positioned symmetrically around the center. The code directly manipulates SVG elements like `circle` and their attributes, such as `cx`, `cy`, `r`, `fill`, and `stroke`. Rendering is achieved through static SVG markup embedded in an HTML document, with no JavaScript libraries involved.

Aahmedoury

91% match