Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Sep 12, 2022

Created on Sep 12, 2022

This fork of a face-building tutorial uses an SVG drawing to show a simple smiley face: a yellow circle with a black outline and two smaller circles for eyes. The code specifies the SVG width and height directly, positioning each shape with explicit `cx` and `cy` coordinates, such as the face at (480, 250) with a radius of 245. It renders using the SVG API within an HTML document, with CSS to remove page margins and hide overflow. The example demonstrates static SVG shapes without interactive behavior or additional D3 features.

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of a "Let's Make a Face" tutorial shows a simple smiley face built entirely from SVG shapes. A large yellow circle with a black stroke forms the head, while two smaller unfilled circles serve as the eyes. The construction relies on hard-coded pixel coordinates for the center (cx="480") and eye placements (cx="350" and cx="600") within a 960 by 500 canvas. The rendering is static SVG, using inline `<circle>` elements without any JavaScript or data-binding libraries.

Mmadroscla

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static SVG smiley face constructed from three yellow circles with black outlines on a 960 by 500 canvas. It is a fork of the "Let's Make a Face" tutorial, representing a halfway point toward a more complete face, as only the head and two eyes are drawn. The code uses inline SVG elements, including `<circle>` tags, with hardcoded `cx`, `cy`, and `r` attributes to position the shapes, and a `<style>` block sets the body margin to zero and hides overflow. No external JavaScript libraries are used; the rendering is purely declarative SVG markup.

Kkoki1010

95% match

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This is a static SVG drawing of a yellow smiley face, constructed from three circles. The face is rendered on a 960 by 500 pixel canvas, with a large yellow circle for the head and two smaller black circles for eyes, each positioned symmetrically. The code uses raw SVG markup within an HTML file, setting the body to hide overflow. The example is presented as a fork of the video tutorial "Let's Make a Face Part I," and the comments within the code show the positioning math for the elements.

EEdier Aristizábal

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face constructed with three SVG circles: a large yellow head with a black outline, and two smaller unfilled eyes. The code uses plain SVG elements inside an HTML page, with coordinates and stroke widths positioned explicitly via the `cx`, `cy`, `r`, and `stroke-width` attributes. No JavaScript libraries or D3 APIs are required; the rendering depends entirely on the browser’s native SVG support. The data is hard-coded in the markup, and the visual output is a simple, geometric face that stops halfway toward a smile.

MMaria

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