Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Sep 6, 2022

Created on Sep 6, 2022

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

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 simple SVG face renders two black circles as eyes over a larger yellow circle, drawn directly in the HTML. The example uses React 18 via UMD, logging the React object to the console on load. No data source is present; the static shapes are hardcoded in the markup. The page loads a compiled `bundle.js`, though the main script only demonstrates React’s availability in the browser.

Oobaidallah alqurshi

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

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static SVG face built with React, consisting of a yellow circle for the head and two smaller black circles for the eyes. The code defines the canvas dimensions, center points, eye offset, eye radius, and stroke width as variables, then uses React’s `ReactDOM.render` to compose the SVG elements with computed coordinates. The rendering relies on React 18.3.1 and ReactDOM, drawing the shapes directly as SVG circles without any data source or interaction.

AAnthony Le

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

92% match

Loading thumbnail…

Fork of Let's Make a Face Part

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.

GGabriel-Rodrigues13

91% match