Let's Make a Face Part I_Tutorial

100%

Let's Make a Face Part I_Tutorial

✓ Published0🌍 Public

Last edited May 26, 2022

Created on May 26, 2022

This example demonstrates the initial step of a "Let's Make a Face" tutorial, using raw SVG shapes within an HTML page. It renders a static face composed of a blue circle for the head, two smaller circles for the eyes, and one for the mouth, all positioned explicitly via `cx` and `cy` attributes. The code uses no external libraries; the SVG elements are drawn directly in the markup, with inline CSS to remove page margins. The face is presented as a basic visual exercise, though the page also includes placeholder text outside the graphic.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Let's Make a Face Part I

A static SVG face composed of three circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically. The circles are drawn using raw SVG elements, with coordinates and radii hardcoded directly in the markup. This example uses plain HTML and CSS, with no JavaScript libraries or data sources, to demonstrate basic shape composition and styling within an SVG canvas.

Jjwlam83

89% match

Loading thumbnail…

Let's Make a Face Part I

This example shows a simple, static face constructed from three SVG circles: a large yellow circle for the head and two smaller circles for the eyes, all centered on a 960 by 500 canvas. The rendering relies on React and ReactDOM to inject the SVG elements into the HTML page, while the `bundle.js` file executes the JavaScript. The face is drawn directly in the markup with hardcoded coordinates and styling, including a black stroke on the head circle, and does not involve any data processing or interactivity.

Jjamieagape

88% match

Loading thumbnail…

Let's Make a Face Part I

This example renders a simple face using three SVG circles: a large yellow circle with a black stroke for the head, and two smaller black circles for eyes. The markup is hand-coded directly in the HTML file, with inline attributes for positioning (cx, cy) and radius (r). It uses no external JavaScript libraries, only plain HTML and CSS. The face is centered on a 960 by 500 pixel canvas, with the eyes placed symmetrically around the center point.

CCees Klap

88% match

Loading thumbnail…

Let's Make a Face Part I

This example shows the initial stage of constructing a face with simple geometric shapes, featuring a large yellow circle for the head and two smaller circles for eyes, all rendered directly in SVG. The code uses plain HTML and SVG element declarations within an inline `<svg>` tag, setting explicit coordinates and radii for each circle. The face is centered on a 960×500 canvas, with the head’s stroke and fill colors specified inline. No JavaScript libraries or data sources are involved; the visualization relies solely on static, hard-coded SVG markup to create the basic facial structure.

Llakalia@wpi.edu

88% match

Loading thumbnail…

Let's Make a Face Part I

This example shows a minimal, static SVG face created from three circles: a large yellow circle for the head and two smaller black circles for the eyes. The page is a single HTML file that uses inline SVG elements with explicit `cx`, `cy`, `r`, and `stroke` attributes to define the shapes. The SVG canvas is sized at 960 by 500 pixels, with the head centered at (480, 250) and the eyes placed symmetrically at (350, 180) and (600, 180). No JavaScript libraries are used; it is a pure vector drawing with hardcoded coordinates.

Jjcrr9232

87% match

Loading thumbnail…

Let's Make a Face Part I

A static SVG face takes shape: a yellow circle with a black stroke forms the head, while two smaller circles serve as eyes. The markup uses raw SVG elements within an HTML file, positioning the head at the center of a 960 by 500 viewport and placing the eyes symmetrically on either side of the vertical axis. The code comments highlight the coordinate calculations for centering and eye offsets, though no animation or interaction is present. The example demonstrates a simple, handmade approach to geometric drawing with basic SVG shapes.

Ggotyou007

87% match

Loading thumbnail…

Let's make a face - Part I

A simple SVG face composed of three overlapping circles—a large yellow head and two black eyes—rendered in a fixed 960×500 viewport. The example demonstrates static SVG drawing within a plain HTML page, with the React library loaded via CDN but only used to log the global `React` object to the console. No interactive behavior or data binding occurs; the face is defined directly with circle coordinates and stroke properties in the markup. The code relies on native SVG elements and React 16.9, with styling presumably applied via an external stylesheet.

BBagaski

87% match

Loading thumbnail…

Let's Make a Face Part I

A yellow circle with a thick black outline serves as a face, and two smaller unfilled circles mark the eyes, leaving the mouth incomplete. This beginner example from the "Let's Make a Face" series uses raw SVG elements—`circle` nodes with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—to build a static, centered composition on a 960-by-500 canvas. The code relies on inline SVG markup directly in the HTML, with no JavaScript libraries or data sources, and renders in the browser via the SVG format.

Aaigioma

87% match