Skip to main content
SimilarExport ZIP
100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public
Ssushmasai85
Last edited Mar 4, 2022
Created on Mar 4, 2022

A yellow circle with a black outline represents a face, positioned at the center of an SVG canvas with two smaller circles for eyes. The code uses plain SVG elements (`<circle>`) to draw the shapes, with the face as a large radius-245 circle and the eyes as radius-50 circles offset to the left and right. The `index.html` file sets the SVG dimensions to 960 by 500 pixels and hides the page margin and overflow via CSS. No JavaScript or external libraries are used; the visualization is purely static 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

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
95% 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
94% 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
94% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with a black outline sits at the center of an SVG canvas, showing a face in progress with two dark eye circles and a smaller nose circle. The example uses plain SVG elements like `<circle>` and inline attributes for positioning and styling, with the overall layout fixed at 960 by 500 pixels. The face is incomplete, lacking a mouth, and the code demonstrates basic coordinate placement without any JavaScript libraries or interactivity.

SSohail Ahmad
94% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with a black outline sits centered on a white canvas, accompanied by two smaller unfilled circles positioned symmetrically within it. This static SVG composition renders a basic face prototype, using fixed coordinates for each shape. The `index.html` file embeds a 960 by 500 pixel SVG element, with circle elements defining the head and eyes, demonstrating a simple, hardcoded approach to vector graphics without any interactive or animated behavior.

Eeinsko
94% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A single static SVG face is drawn from three circles: a wide yellow head with a black outline and two dark eyes positioned symmetrically on either side of the center. The markup in `index.html` directly sets each circle’s `cx`, `cy`, `r`, `fill`, and `stroke` attributes inside an inline `<svg>` element with a fixed 960×500 viewport. The code includes commented calculations for centering and eye offsets, but no JavaScript or animation is present, so the result is a simple, non-interactive illustration.

FFar Jangtrakool
94% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow circle face with two smaller circles for eyes, positioned on a black-outlined face against a blank background. The SVG rendering uses hardcoded coordinates for the face and eye placements, with no data-driven logic or interactive behavior. The visualization relies on basic SVG circle elements, setting the face at center (480, 250) with a radius of 245 and eyes at (350, 180) and (600, 180) with a radius of 50 each. The code directly specifies stroke and fill colors, and the page is styled to hide overflow, creating a minimal static graphic.

KKusumaKumariDama@my.unt.edu
94% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow circle face with two smaller circles for eyes, positioned on a black-outlined face against a blank background. The SVG rendering uses hardcoded coordinates for the face and eye placements, with no data-driven logic or interactive behavior. The visualization relies on basic SVG circle elements, setting the face at center (480, 250) with a radius of 245 and eyes at (350, 180) and (600, 180) with a radius of 50 each. The code directly specifies stroke and fill colors, and the page is styled to hide overflow, creating a minimal static graphic.

KKusumaKumariDama@my.unt.edu
94% match