Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Apr 29, 2021

Created on Apr 29, 2021

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

An incomplete cartoon face is drawn on a yellow circle, with only two black eyes rendered so far. The example builds a static SVG composition using React, embedding the markup directly in an HTML document. The face is constructed with basic SVG primitives, including circles for the head and eyes, and styled with fill and stroke attributes. The page loads React from a CDN, although the current code does not yet employ any dynamic behavior or interaction.

AArin R. Greenwood

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face built with React and JSX. It shows a yellow circle with a black stroke, two black eye circles positioned with hard-coded coordinates, and no mouth, as the README notes it is only halfway to a complete face. The code uses React 17 from a UMD build and draws directly with SVG elements like `<circle>`, setting positions and sizes absolutely. The example demonstrates simple, non-interactive geometric composition rather than data-driven visualization.

JJulian Huarachi

94% match

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

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

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.

DDenise Mauldin

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

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

This example demonstrates the initial steps of constructing a face using React and SVG, showing two black eye circles positioned on a larger yellow circle that serves as the head. The code uses React 16.9.0 via UMD builds and ReactDOM, with SVG elements rendered directly in the HTML. The drawing employs fixed coordinates—eyes placed at cx 350 and 600, cy 180—on a 960×500 canvas, with a yellow circle centered at (480, 250) featuring a black stroke. The fork builds on an existing tutorial, producing a static, halfway-complete smiley face.

AAbhimanyuGit447

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face built with React elements, featuring a yellow circular head with black stroke and two unfilled eyes. The markup directly encodes a 960 by 500 viewBox, positioning the head at center, and places windows for eyes using hardcoded coordinates. It demonstrates hand-authored SVG in JSX, where the body imports React and logs it to the console, while the index.html loads production React and ReactDOM from a CDN. The example serves as an instructional starting point for constructing shapes.

RRohan s

92% match