I Made A Face Part I

100%

I Made A Face Part I

✓ Published0🌍 Public

Last edited Mar 11, 2021

Created on Mar 11, 2021

This visualization shows the first step toward building a smiley face, displaying a large black circle outlined in yellow with two smaller yellow circles positioned as eyes. The SVG markup directly defines each shape using explicit `cx`, `cy`, and `r` attributes on `<circle>` elements, with a 960-by-500 viewport. The code computes eye placement relative to the center and stroke width, though no JavaScript libraries or data sources are used—only static, hardcoded coordinate values render the simple geometric composition.

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

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

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

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

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

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

90% match

Loading thumbnail…

Let's Make a Face Part I

A single yellow circle with a black outline forms the base of a smiley face. Two smaller black circles serve as eyes, positioned symmetrically on either side of the face's vertical center. The code uses raw SVG elements—a `<circle>` for the face and two additional `<circle>` elements for the eyes—directly embedded in an HTML document. The fixed 960 by 500 viewport and manual coordinate calculations for the eye positions are visible in the source.

Ddreesmpk

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

89% match