Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Dec 20, 2021

Created on Dec 20, 2021

A stylized smiley face drawn with a single SVG canvas uses nested `<circle>` elements to render a yellow head, black outline, and two dark eyes. The circles are positioned with hardcoded `cx` and `cy` coordinates, with a computed `r` radius of 245 for the face and 50 for each eye. The page sets `overflow: hidden` and a 960x500 viewport, showing only static vector shapes without animation or interaction. The example demonstrates basic SVG placement and stroke styling in plain HTML.

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 draws a simple smiley face using SVG primitives inside an HTML page. It shows a large yellow circle with a thick black stroke as the face, alongside two smaller black circles positioned for the eyes. The code directly constructs the `<circle>` elements within a 960-by-500 SVG canvas, using explicit `cx`, `cy`, and `r` attributes to place each shape. No JavaScript libraries are used; the rendering relies solely on static SVG markup.

MMatthewNunes

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face constructed from three SVG circles: a large yellow head and two smaller eyes. The face is centered in an SVG canvas, drawn with a black stroke. The code uses basic SVG elements (`circle` tags) within a manually authored `svg` markup, with inline styling for body margins and overflow. No JavaScript libraries or data sources are involved; the visualization is purely declarative HTML/SVG, as seen in the static `index.html` file.

Oognyvrac

94% 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

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face drawn on a 960-by-500 SVG canvas. Two solid black circles serve as eyes, while the large yellow circle with a black stroke forms the head; the mouth is not yet drawn, as noted in the README. The rendering relies on raw SVG elements—`circle` with `fill` and `stroke` attributes—defined directly in the HTML, with CSS hiding scrollbars and resetting margins. The code uses no external libraries, only native SVG markup for static vector shapes.

RRayed12

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face composed of three circles: a large yellow head with a black outline and two smaller black eyes positioned on a light background. The code uses inline SVG elements with explicit pixel coordinates and stroke properties to define the shapes. It renders to a 960 by 500 canvas and represents a simple, non-interactive visualization of a smiley face’s basic geometry. The example is a direct HTML/SVG implementation without any JavaScript libraries.

FFernando C. Filho

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG drawing shows a yellow circle with a black outline and two smaller inner circles, resembling an unfinished smiley face. The code sets a 960 by 500 pixel canvas and uses `circle` elements with explicit `cx`, `cy`, and `r` attributes, plus `fill` and `stroke` properties. It includes commented calculations for eye placement relative to the center and stroke width. No animation or interaction is present; the rendering is a direct SVG output from an embedded HTML file.

AArnold-bornagain

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face drawn with two outer circles and two eye circles, built from raw SVG markup inside an HTML page. The face is centered on a 960 by 500 canvas, with a yellow head stroked in black and two smaller black circles for eyes. The code uses no JavaScript libraries or D3 APIs; instead, it relies entirely on inline `<circle>` elements and SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. The rendering approach is direct SVG, with the page styled to hide margins and overflow.

MmwellsSFMC

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circular face with black outline is drawn on an SVG canvas, showing three circles: one large head and two smaller eyes positioned symmetrically. The rendering uses static SVG elements defined directly in the HTML, without any JavaScript or D3.js interaction. The code sets explicit coordinates and radius values for each circle, with the head centered at (480, 250) and eyes placed at (350, 180) and (600, 180). This example is a fork demonstrating basic SVG shape creation for a smiley face, using only native markup with styling applied through CSS attributes.

Ttdinh09

94% match