Fork of Let's Make a Face Part

100%

Fork of Let's Make a Face Part

✓ Published0🌍 Public

Last edited Dec 18, 2021

Created on Dec 18, 2021

This fork of “Let’s Make a Face” displays a static yellow circle face with two smaller black outlined circles for eyes, placed on an SVG canvas of 960 by 500 pixels. The React and ReactDOM libraries are loaded, and the visualization renders via inline SVG elements within the index.html file, while index.js logs React and renders a simple “Hello Jsx” heading into the root div. No interactive behavior or additional facial features are present beyond the three circles.

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 yellow circle fills the center of an SVG canvas, rendered with React and ReactDOM, with a black outline created by the `stroke` and `stroke-width` attributes. The circle’s radius is set relative to the canvas height, and its position is fixed at the center. The `index.html` file loads the React libraries from unpkg and renders the component into a root div, with commented-out placeholder circles for additional facial features.

Vvikithareddy

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

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

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

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a single yellow circle with a black outline, positioned in the center of the browser window, with two smaller black circles for eyes. The face is incomplete, showing only the head and eyes, with no mouth or other features rendered. The visualization is built using React and ReactDOM, rendering SVG elements directly to the page, with dimensions derived from the window’s inner width and height. The code defines constants for eye offset, radius, and stroke width to position the shapes.

JJsimluken

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

This fork of “Let’s Make a Face Part I” plots a static smiley face using React and SVG primitives. The visualization shows a yellow circle head with two black eye circles, rendered directly in the HTML with hardcoded coordinates. React 17 and ReactDOM manage the page structure, while the facial elements are drawn as SVG `<circle>` elements with explicit fill, stroke, and stroke-width attributes. No interactive behavior or data binding is present; the example serves as a minimal, self-contained illustration of SVG drawing within a React shell.

LLejla Kafedzic

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static yellow smiley face made of three SVG circles: a large head and two smaller eyes, positioned on a 960×500 canvas. The React framework renders a "Hello World" heading alongside the hardcoded SVG markup, which is drawn directly in the HTML using circle elements with explicit cx, cy, and r attributes. The visualization uses React 16.7 and SVG, with black strokes and a yellow fill, while the accompanying README notes it is halfway toward a more complete face.

RRob

92% match