Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Nov 5, 2021

Created on Nov 5, 2021

A yellow smiley face rendered as a static SVG using React 17. Two fixed black circles serve as eyes, while no mouth yet appears—partway toward completion. The code defines the face with inline JSX elements inside a plain `index.html`, using React and ReactDOM from UMD builds to mount the structure. The example serves as a minimal demonstration of React-driven SVG composition.

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 half-finished smiley face rendered with React components inside an SVG container. The yellow circular head and two black eye circles are drawn using hard-coded SVG coordinate values, with the face lacking its mouth. The example demonstrates static SVG rendering through React's `ReactDOM` API, using React 18 and ReactDOM 18 loaded via UMD scripts. The code includes commented-out calculations for positioning elements relative to the center and stroke width, hinting at future dynamic placement logic.

Rramz213

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face rendered as static SVG shapes: a large circle for the head and two smaller circles for the eyes. The code uses React 17 via a UMD script, with all elements hardcoded in JSX inside an `<svg>` tag. It relies on basic SVG circle elements with fixed coordinates and stroke properties, and includes a placeholder `console.log` and `alert` call that execute on load. The face is incomplete, missing a mouth, as noted in the README.

QQingzhi Ma

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static yellow smiley face made from three SVG circles: a large outlined face and two smaller eyes. The code uses React 17 via a UMD build to render the SVG elements directly in the browser. All coordinates and dimensions are hard-coded, with the face centered at (480, 250) and a 245-pixel radius. The rendering approach relies on plain SVG shapes without any interactive behavior or data-driven updates.

SShankar Ghimire

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face rendered in React, with a yellow circle for the head, a black outline, and two smaller circles for eyes. The code uses React 18 and ReactDOM to render the SVG directly in the browser. It appears to be a work-in-progress, as the facial elements are incomplete. The source includes an instructional video link, suggesting this is a practice exercise. The SVG dimensions are fixed at 960 by 500 pixels, with circles positioned using explicit coordinates.

Ootis

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with a black outline and two smaller black circles for eyes represents the start of a smiley face. The example uses React 17 via UMD, rendering the shapes directly as SVG elements with explicit pixel coordinates. It demonstrates a static, hand-coded SVG composition without any data binding or interaction, serving as a minimal React-in-SVG demonstration.

RRyan Catlin

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static yellow smiley face rendered with React and SVG, missing the eyes and mouth. The example uses React 17 to generate three SVG circles: a large yellow face with a black stroke and two smaller black circles for eye positions. The drawing is hardcoded with absolute coordinates in a 960×500 viewport, demonstrating basic SVG shape composition without interaction or animation. JavaScript console logging confirms React is loaded, but no data or dynamic behavior is present.

JJosephK98

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from three SVG circles: a large yellow face and two smaller eyes. It uses React to render the DOM structure, with the static SVG markup embedded directly in the HTML file. The code references React 17 via UMD builds and includes an `index.js` placeholder that renders a "Hello JSX" heading, but the visible face is drawn entirely from the hardcoded SVG elements, not from the React component.

Eeatenmoth

95% match