Skip to main content
SimilarExport ZIP
100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public
AArkaporn Poonkwan
Last edited Jun 24, 2022
Created on Jun 24, 2022

This example shows a simple yellow smiley face drawn as three circles inside an SVG, with a black outline and two eyes positioned symmetrically around the center. The face is rendered at 960 by 500 pixels, using hard-coded coordinates rather than data-driven binding. It relies on basic SVG circle elements and inline attributes for positioning and styling, with no JavaScript libraries. The design is a static illustration, serving as a minimal starting point for a facial visualization.

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

Fork of Let's Make a Face Part I

This example shows a minimalist yellow smiley face constructed from three SVG circles on a 960 by 500 canvas. The main face is a large yellow circle with a black stroke, positioned at the center, while two smaller black circles serve as eyes. The code uses raw SVG elements within an HTML document, with static coordinates for the circles and basic styling through inline attributes. The rendering is a simple, static vector illustration without animation or interactivity.

Jjanek206
96% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static yellow smiley face drawn with three SVG circles: one large circle for the head and two smaller circles for the eyes, all centered on a 960-by-500 canvas. The head uses a yellow fill with a black stroke, while the eyes are plain black circles. The code relies solely on raw SVG elements—`<svg>`, `<circle>`, and their attributes—without any JavaScript libraries or D3.js functions. The rendering is built directly in the HTML file, with no data source or dynamic behavior; it simply displays the face as a fixed visual composition.

Ffmparantean@yahoo.com
96% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static yellow smiley face drawn with three SVG circles: one large circle for the head and two smaller circles for the eyes, all centered on a 960-by-500 canvas. The head uses a yellow fill with a black stroke, while the eyes are plain black circles. The code relies solely on raw SVG elements—`<svg>`, `<circle>`, and their attributes—without any JavaScript libraries or D3.js functions. The rendering is built directly in the HTML file, with no data source or dynamic behavior; it simply displays the face as a fixed visual composition.

Ffmparantean@yahoo.com
96% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face constructed from three SVG circles on a yellow face, with two black eye circles positioned on either side of the center. The face is drawn using raw SVG elements—a yellow `<circle>` with a black stroke, and two unfilled `<circle>` elements for the eyes—all laid out on a 960-by-500 canvas. No JavaScript libraries or animation logic are present; the effect relies entirely on the SVG markup and CSS resets to remove page margins. The rendering is purely vector-based, with coordinates hard-coded into the HTML file.

SSebastian Ruggero
96% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face drawn with three SVG circles: one large circle for the head and two smaller circles for the eyes. The page uses plain SVG markup embedded directly in an HTML file, with the head circle set to a yellow fill and black stroke. The eyes are positioned absolutely without expressions, leaving the face incomplete, as described in the README as “half way towards a smiley face.” The code relies on native SVG elements and no external JavaScript libraries, with the viewport fixed at 960 by 500 pixels.

VVIVEK KUMAR
96% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A fork of an introductory smiley face example renders a yellow circle with black outline and two smaller circles as eyes on an SVG canvas. The static face is drawn using only raw SVG elements—circle tags with explicit cx, cy, r, fill, and stroke attributes—without any JavaScript or data binding. The markup directly positions the face at the center with offset eye coordinates, demonstrating basic SVG shape composition. The example shows a static, non-interactive visualization of a simplified face layout.

Aahadsddq
96% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization shows a simple yellow smiley face built from three SVG circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically around the center. The face is rendered statically using plain SVG elements within an HTML page, with dimensions set to 960 by 500 pixels. The code demonstrates basic circle placement through explicit `cx` and `cy` attributes, using fixed coordinates (480, 250) for the head and offset positions for the eyes. No interactive or animated behavior is present; the example serves as a foundational step toward constructing more complex facial features.

JJavier Sanmiguel
96% match