Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Jul 5, 2021

Created on Jul 4, 2021

A static SVG face with a yellow circular head, black outline, and two black eyes sits centered on a 960 by 500 canvas. The face is created directly in the HTML markup using `<circle>` elements, with the head positioned at (480, 250) and eyes at (350, 180) and (600, 180). The page loads React 17 via a UMD script and the `index.js` imports React, but no dynamic rendering or interaction occurs—the visual is purely declarative SVG. The embedded YouTube video suggests a tutorial accompanies the static example.

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 static face is drawn as two large black-outlined yellow circles for the head and eyes, centered on an SVG canvas. The rendering uses raw SVG elements (`circle` with `fill`, `stroke`, and `stroke-width`) declared directly in the HTML body, despite the presence of React and ReactDOM libraries in the source. The code includes a placeholder JavaScript file that merely logs to the console, leaving the face purely declarative and non-interactive.

SSagar Saxena

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face with a yellow circular head and two black eye circles is drawn directly in the HTML body, while a React app renders a separate "Hello JSX" heading into a root div. The face uses fixed coordinates for the circles, with the head centered at (480, 250) and eyes offset horizontally. The code loads React and ReactDOM from CDN and relies on the bundle.js script for the React component, though no interactive behavior is demonstrated.

JJustin Olson

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

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

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

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG smiley face renders a yellow circle with two black-outlined eyes centered on a 960 by 500 canvas. The face is built directly in the HTML markup using numbered `<circle>` elements, with the head at position (480, 250) and eyes offset horizontally. The example accompanies a video tutorial on constructing faces step by step. While the page loads React and ReactDOM from CDN scripts, the current visualization uses plain SVG geometry without any React components or interactive behavior.

Cchenxlong3

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

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

92% match