Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Dec 31, 2021

Created on Dec 30, 2021

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.

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

This example shows a static yellow smiley face rendered as SVG circles, drawn directly in the HTML body. The code uses React 18 and ReactDOM 17, though the actual face is hard-coded SVG markup rather than React components. The face consists of three circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically. The index.js file contains a basic React component that would render "Hello JSX," but it does not interact with the face.

Aaggarwalc

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

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

94% match

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example shows a minimal React application that renders a static yellow SVG face with two black-outlined eyes, stopping short of completing a full smiley face. The code constructs the SVG elements directly in HTML comments, while the visible React component simply displays a heading and logs library versions. It imports React and ReactDOM from unpkg CDN links, using `ReactDom.render` to mount the app into the DOM. The rendering approach relies on standard SVG `circle` elements for the face and eyes, with coordinates calculated relative to the canvas dimensions.

PPierre Tabet

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static, hand-coded SVG smiley face, with a yellow circle head, two dark eye circles, and a thick black stroke, while a React app renders only a placeholder "hello JSX" heading. The SVG markup is embedded directly in the HTML body, using fixed coordinates and dimensions (960x500), and the circle positions are manually set. The code imports React and ReactDOM from UMD builds, logs ReactDOM to the console, and mounts a basic functional component into a root div, but the visual result is entirely independent of the React logic.

Ssoap945

93% match

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example shows a static yellow smiley face built with a large circle for the head and two smaller circles for the eyes, all rendered in SVG. The HTML markup positions the face at the center of a 960-by-500 viewport, using explicit coordinates for each circle. The React code imports React and ReactDOM, defines a simple functional component that returns "Hello JSX," and renders it into the root element, though the SVG face is placed directly in the HTML file. The project relies on React v16.7.0 and ReactDOM, with the face serving as a visual starting point for a tutorial series.

Jjanenoxid

93% match