Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Aug 18, 2022

Created on Aug 18, 2022

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.

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 static smiley face rendered with React and SVG elements. A yellow circle with a black stroke forms the head, while two smaller black circles positioned with fixed coordinates serve as eyes. The code defines the face directly in JSX inside the HTML file, using plain SVG circle tags without any interactive or animated behavior. React and ReactDOM are imported via CDN, and the rendering approach relies on hardcoded pixel values for all shapes. The project is linked to a YouTube tutorial on creating faces, though no face components or drawing logic are implemented programmatically.

MModliestOrange

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from SVG circles: a yellow head, two eyes, and a mouth. It uses React to render the SVG elements, with hardcoded coordinates for the head and eyes. The code defines width, height, and center points to position the main face shape, while the eyes are placed at fixed offsets from the center. React 18 and ReactDOM render the component to the page, though the displayed face only includes the head and eyes, not the mouth.

FFangfei Zhang

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static smiley face constructed from SVG circles: a large yellow head with a black outline and two smaller black circles for eyes. The code uses React and ReactDOM to manage the page, while the face itself is drawn directly in the markup. The rendering relies on SVG primitives within a fixed 960-by-500 viewport, with coordinates placed to center the head and position the eyes symmetrically. The project shows a foundational step toward a more complex face, with only the head and eyes present so far.

Ggzm17

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example uses React to render an SVG smiley face. The code draws a yellow circle for the head and two smaller black circles for eyes, with positions calculated from the SVG’s center coordinates. React 17 and ReactDOM are used to mount the component, which is composed entirely of SVG circle elements. The face’s dimensions and offsets are defined as constants, and the rendering shows a static, basic facial geometry without animation or additional features.

CCbrc27

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static, React-rendered smiley face constructed from three SVG circles: a yellow face outline and two black eyes. It uses React 18 and ReactDOM to mount an SVG element programmatically into the page’s root div, with the face’s facial features hardcoded as circle coordinates and radii. The code also includes a raw SVG fallback in the HTML, demonstrating the same visual without the React layer.

KKhaihuyennguyen

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simplified smiley face rendered as static SVG shapes: a yellow circle for the head and two black circles for eyes, positioned within a fixed 960x500 viewport. The code uses plain React 17 elements to define the SVG markup directly in JSX, with hardcoded coordinates and stroke widths. It does not include a mouth, any animation, or interactive behavior. A video embed in the README references a tutorial titled "Let's Make a Face Part I," but the running visualization itself is limited to the three static circles.

RRohit Thakare

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static, yellow smiley face drawn with three SVG circles: a large filled circle for the head and two smaller unfilled circles for eyes. The code defines the layout using React and ReactDOM, computing the center coordinates and radius from fixed width and height variables rather than hardcoding them. The rendering relies on SVG circle elements and an inline stylesheet to remove page margins.

BBrian Blakely

96% match