Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited May 9, 2021

Created on May 9, 2021

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.

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

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

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

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

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

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A minimal React example plots a yellow circle face with two black eyes on an SVG canvas. It uses React 18's UMD build from unpkg and directly renders SVG elements for the face and eyes. The code calculates eye positions relative to the canvas center and face radius, demonstrating coordinate placement within an SVG viewBox. This static composition shows how to create a basic smiley face without interactivity or animations.

AArkaporn Poonkwan

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A simple React application renders a yellow smiley face as an SVG graphic. It uses hard-coded coordinates and constants to draw three circles: a large face outline with a black stroke, and two smaller black circles for eyes. The code defines variables for the SVG canvas dimensions, face center, stroke width, and eye offsets, then renders the elements using JSX. The visualization demonstrates basic SVG shape composition within a React component, with no interactive or data-driven behavior.

DDawn

94% match