Skip to main content
SimilarExport ZIP
100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public
SShivam-raval96
Last edited Dec 23, 2021
Created on Dec 23, 2021

This example shows a static smiley face built with SVG primitives: a large yellow circle for the head and two smaller black circles for eyes, all rendered on a 960 by 500 canvas. The code uses raw SVG elements—`circle` and `stroke` attributes—directly in the HTML, without any JavaScript libraries. The face is centered with the head’s radius and stroke width accounted for in the positioning, and the eyes are placed at fixed x-coordinates on either side of the center. No animation or interaction is present; it is purely a geometric composition.

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 creates a basic smiley face using SVG shapes coded directly in an HTML file. It shows a large yellow circle with a black border as the head, alongside two smaller black circles for eyes. The code uses no JavaScript libraries, instead relying on raw SVG elements like `<circle>` with inline attributes for positioning and styling. The rendering approach is static SVG, with the face centered at 480,250 and eyes offset horizontally on either side.

RRShailza
96% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static partially completed smiley face drawn with SVG primitives. A large yellow circle with a black stroke forms the head, while two smaller unfilled circles represent the eyes. The code uses raw SVG elements—`<circle>` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—inside an inline `<svg>` block. No JavaScript libraries are employed; the rendering is purely declarative SVG markup, positioned within a 960×500 viewport.

Jjam9501
96% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from three SVG circles: a large yellow head with a black outline and two smaller black eyes. The head is centered at (480, 250) with a radius of 245, while the eyes are positioned at (350, 180) and (600, 180) with a radius of 50. The code uses raw SVG elements—`circle` tags with attributes for position, fill, stroke, and stroke-width—rather than a library like D3. The page is styled with minimal CSS to remove margins and hide overflow, and the face represents “halfway” progress toward a more complex face.

RRoshan Kumar
96% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from three SVG circles: a large yellow head with a black outline and two smaller black eyes. The head is centered at (480, 250) with a radius of 245, while the eyes are positioned at (350, 180) and (600, 180) with a radius of 50. The code uses raw SVG elements—`circle` tags with attributes for position, fill, stroke, and stroke-width—rather than a library like D3. The page is styled with minimal CSS to remove margins and hide overflow, and the face represents “halfway” progress toward a more complex face.

RRoshan Kumar
96% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face created with basic SVG shapes. The code draws a large yellow circle with a black stroke for the head, and two smaller black circles for the eyes, all placed within an SVG element. It does not use any JavaScript libraries, relying instead on the D3.js version 3's underlying SVG support, but the data visualization is purely declarative HTML. The entire composition is centered on an 960x500 canvas, with explicit coordinates for the head and eye positions.

AArvind Chauhan
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
95% 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
95% 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
95% match