Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Aug 5, 2022

Created on Aug 5, 2022

This example shows a simple face composed of three SVG circles: a large yellow circle for the head and two smaller black circles for eyes, arranged on a 960-by-500 canvas. The view renders through static SVG markup embedded directly in the HTML page, with React loaded via a UMD script tag but not used for drawing. The code also includes a video embed and a JavaScript console log statement.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face built from three circles—a yellow head and two eyes—is rendered in a 960 by 500 viewport. The example uses React 17 to mount the markup, though the SVG is hard-coded in the HTML, with no interactive or animated behavior. It demonstrates a minimal, declarative approach to compositing basic shapes in a browser.

AAimiton Isaiah Oluwatobi

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow SVG circle forms the face, with two smaller black circles as eyes positioned below the center line. The visualization demonstrates basic React usage by loading the React UMD production build via a script tag, then rendering static SVG elements directly in the HTML body. The code comments show the manual coordinate calculations for centering features relative to the face radius and stroke width, with dimensions fixed at 960 by 500 pixels. No interactive behavior or data binding is present, only the pure geometric layout of three circles.

Ttrashmail

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with a black outline forms the face, centered within an SVG canvas. Two smaller, unfilled circles represent the eyes, positioned symmetrically to the left and right of the face's center and above its vertical midpoint. The code uses React and ReactDOM to render the SVG elements, with dimensions and positions defined by JavaScript variables for width, height, center coordinates, stroke width, eye offset, and eye radius. The rendering approach is purely SVG, with no external data source.

BBhabesh

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A simple SVG face renders a large light green circle as the head, with two smaller black-outlined circles for eyes positioned on a 960 by 500 canvas. Built with React and ReactDOM, the component calculates center coordinates and uses hardcoded eye positions. The example demonstrates basic circle primitive rendering and static layout, with no interactive behavior or data binding.

SSahil-Jain-s

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization shows a simple face constructed from three circles on a green background. It uses React 18 and renders as an SVG, with two small circles for eyes and one large circle for the head, all positioned using viewport-relative units. The code loads React from a CDN and logs the React object to the console, though it does not actually create any React components, instead relying on hand-written SVG markup within the HTML.

JJason Zenarosa

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple cartoon face built with two eye circles and a large yellow head, all rendered as static SVG shapes. The face is drawn on a 960×500 canvas with a black-outlined yellow circle for the head and two smaller unfilled circles for eyes. The code uses React 17 via UMD builds to render the SVG elements, with styling that hides page overflow and removes margins. The title references a “Part I” tutorial, suggesting an incomplete or staged construction of the face.

AAlbatrus

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example draws a simple cartoon face using Scalable Vector Graphics (SVG) markup. It shows a large yellow circle for the head with a thick black stroke, and two smaller unfilled circles positioned as eyes on a 960 by 500 viewport. The visualization is built with plain HTML and CSS, using absolute pixel coordinates for each circle’s center and radius. JavaScript and React are not actively used in the rendering logic; the face is static and defined entirely within the `index.html` file.

Aavohland16

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from three SVG circles: a large yellow head and two black eyes, rendered centered on a 960-by-500 canvas. The React component defines numeric constants for the head radius, eye offset, and stroke width, then passes them as SVG attributes to circle elements. It uses React 18 and ReactDOM to render the static SVG directly into the DOM, with no animation or interactivity. The drawing is a foundational step toward a more complete face, as the title suggests.

Ssunyixia025@gmail.com

93% match