Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Apr 7, 2021

Created on Apr 7, 2021

This example shows a simple yellow circle with two smaller black circles positioned as eyes, forming the first step toward a smiley face. The SVG rendering uses hardcoded coordinates and radii rather than a data-driven approach. The code directly sets circle elements with cx, cy, and r attributes through inline SVG markup, with no external JavaScript libraries or dynamic data sources involved. The face is deliberately incomplete, stopping at the eyes without a mouth.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows the first step in constructing a smiley face with basic SVG shapes, using a yellow circle for the head and two smaller black circles for the eyes. The code directly sets SVG circle attributes such as `cx`, `cy`, `r`, `fill`, and `stroke` inside an `svg` element with a fixed width and height. It does not use any JavaScript libraries or data sources; the rendering relies purely on static SVG markup, with the face positioned relative to the viewport center and eye offsets.

Eevd9

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows the initial stage of building a smiley face, displaying a large yellow circle with a black outline and two smaller black circles for eyes. The SVG rendering uses the `<circle>` element with explicit `cx`, `cy`, and `r` attributes to position each shape on a 960 by 500 canvas. The first circle is centered, while the eyes are placed using horizontal offsets from the center, as noted in the HTML comments. The layout is static and does not involve any scripting libraries or data sources.

Oolirek1

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows the first step in constructing a smiley face, with a large yellow circle and two smaller circles for eyes. The SVG is drawn statically using raw SVG elements like `<circle>`, with attributes for position, radius, fill, and stroke. Its dimensions are set to 960 by 500 pixels. The code does not incorporate any JavaScript libraries or dynamic behaviors, relying entirely on declarative SVG markup to render the shapes.

Aaj507575

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face drawn as three SVG circles: a large outlined face and two smaller eyes. The code uses static SVG elements with explicit coordinates and stroke properties rather than a data-driven approach. It demonstrates basic SVG circle rendering, with the face positioned at the center of a 960 by 500 viewport and eyes offset horizontally. The rendering relies entirely on inline SVG markup, with no JavaScript libraries or interactions, serving as an introductory step in a face-building tutorial series.

Kkan qiu

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face drawn on a blank SVG canvas, with two black eye circles positioned on a larger face circle. The face consists of three SVG `<circle>` elements: a large yellow circle with a black stroke for the head, and two smaller black circles for eyes. It uses raw SVG markup within an HTML file, with no JavaScript libraries or data sources, relying solely on explicit coordinate attributes (cx, cy, r) for placement.

Rrhona-o'neill

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face Part I” displays a static yellow circle with a black outline and two smaller black circles for eyes, representing a simple smiley face in progress. The SVG uses hardcoded circle elements with explicit cx, cy, and r attributes, positioned at the center and offset horizontally for symmetry. No JavaScript libraries are used; rendering relies entirely on inline SVG markup within an HTML document.

JJean David

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow circle face with two white-and-black eye pairs, rendered as a static SVG. The SVG uses nested circles to create a stylized, incomplete smiley face, with the outer face and eye whites drawn in yellow and white, and the pupils in black. The code writes these shapes directly into the HTML document using inline SVG elements, with no libraries or data sources. The rendering is entirely declarative, relying on SVG circle coordinates and radii for placement.

HHaris Abdullah

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple face constructed from three SVG circles: a large yellow circle forms the head, and two smaller black circles represent the eyes. The rendering uses the SVG API directly, with explicit `cx`, `cy`, and `r` attributes positioned via absolute coordinates on a 960 by 500 canvas. The head's outline is styled with a yellow fill and ten-pixel black stroke. The code is a static, non-interactive drawing that forms the first step toward a smiley face, as noted in the README.

AAdarsh M

95% match