Skip to main content
SimilarExport ZIP
100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public
GGRAVES1425
Last edited Feb 16, 2022
Created on Feb 16, 2022

This fork of “Let’s Make a Face Part I” displays a simple yellow circle with a thick black stroke as a head, plus two smaller circles for eyes on an SVG canvas. It uses plain SVG elements (`<circle>`) embedded directly in HTML, with coordinates placed manually to center the face and offset the eyes horizontally. The rendering is static, with no interaction or animation, and the body margin is hidden to fill the viewport. The code comments note stroke-width adjustments for eye 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

A yellow circle with a black outline forms the base of a simple face, centered in an SVG canvas. Two smaller black circles serve as eyes, positioned symmetrically on either side of the face’s vertical midline. The code renders directly to SVG elements using static `<circle>` tags, with inline attributes for coordinates, radius, fill, and stroke. No JavaScript libraries or interaction are present; the visualization is a purely declarative HTML and SVG composition, with styling applied through a minimal embedded CSS rule that hides page margins.

PPolina Sysoeva
93% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A simple SVG face shows a yellow circle head with two black eyes, rendered directly in HTML without JavaScript. The code positions a 245-pixel-radius face at the center of a 960 by 500 canvas, using inline `circle` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The eyes are placed at fixed offsets from the center, demonstrating static SVG drawing with the browser’s native rendering, not an interactive or data-driven visualization. No external libraries are used.

Hhommrich@web.de
93% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face Part I” shows three circles on an SVG canvas: a large yellow circle outlined in black, plus two smaller unfilled circles positioned symmetrically above its center. The drawing is created directly in an HTML file using inline SVG elements (circle, cx, cy, r, fill, stroke). The code explicitly comments the geometric calculations for vertical centering and eye placement, and the page hides body scrollbars for a clean presentation. No JavaScript or external library is used.

AAndy Ngo
93% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let's Make a Face Part I” shows the initial step toward building a smiley face, displaying a yellow circle with two smaller black circles for eyes on an SVG canvas. The code uses raw SVG elements—`circle` tags with attributes for center coordinates, radius, fill, and stroke—to draw the shapes, with the face positioned at the center of a 960×500 viewport. Comments in the HTML indicate planned calculations for eye placement and stroke width adjustments, though no interactive or data-driven behavior is present yet.

GGyromighty
93% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A bright yellow circle with a thick black stroke fills the center of an SVG canvas, forming a simple face. Two smaller black circles are positioned on either side of the face for eyes. The code uses raw SVG elements (`circle`) to render the shapes, setting coordinates and radii directly. This example demonstrates basic geometric composition without data binding or interaction, focusing on SVG styling and layout.

Hhimchan94
93% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A bright yellow circle with a thick black stroke fills the center of an SVG canvas, forming a simple face. Two smaller black circles are positioned on either side of the face for eyes. The code uses raw SVG elements (`circle`) to render the shapes, setting coordinates and radii directly. This example demonstrates basic geometric composition without data binding or interaction, focusing on SVG styling and layout.

Hhimchan94
93% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face, composed of a yellow circle with a black outline, sits centered on the canvas. The face displays two smaller black circles for eyes, positioned symmetrically around the center. The markup explicitly sets both the SVG dimensions and the circle coordinates, using inline styling for the fill and stroke properties. The page’s HTML structure and CSS reset body margins, producing a full-window visual without any interactive or animated behavior. The code relies solely on native SVG elements within the HTML document.

AAbolhasan Zaman
93% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face with a yellow circular head, black outline, and two dark eyes sits centered on a 960 by 500 canvas. The example uses plain inline SVG elements—`circle` tags with explicit `cx`, `cy`, and `r` attributes—to construct the basic facial features, leaving the mouth unfinished. It demonstrates fundamental SVG coordinate placement and styling, with the head positioned at the center and eyes offset horizontally, as noted in the code comments. The rendering is entirely declarative, with no JavaScript interaction or data binding.

Llukas.guenter@stud.plus.ac.at
93% match