Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Feb 28, 2021

Created on Feb 28, 2021

A basic smiley face is rendered as a yellow circle with two black eyes, drawn using React and SVG. The example demonstrates positioning SVG elements within a React component, computing coordinates from a central point. It uses React 17 and ReactDOM, with hardcoded dimensions for width, height, and eye offsets rather than external data. The face is incomplete, showing only the head and eyes, as indicated in the README’s note about being halfway toward a smile.

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 smiley face is drawn as a circle with black stroke, featuring two offset circular eyes. The React application uses hardcoded SVG dimensions and variables for positioning, rendering through ReactDOM. It demonstrates basic SVG circle elements with React components, using unexported constants for layout calculations.

Bbut-whythough

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with two smaller black circles forms an incomplete smiley face, missing its mouth. The face is rendered as SVG elements using React components, with all coordinates calculated relative to a 960×500 viewport. The code uses React 16.9 and ReactDOM to manage the SVG circle elements, explicitly setting fill, stroke, stroke-width, and radius properties based on derived constants. The example demonstrates a step-by-step approach to building a face, with the current state showing only the head and eyes before adding the smile.

KKonJoDot

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

A yellow smiley face rendered as an SVG uses React components to draw three circles: a large head and two eyes. The head’s radius and eye positions derive from the viewport dimensions (960 by 500) and preset offsets, with a black stroke defining the face outline. The code uses React’s `createElement` via JSX and renders with `ReactDOM.render`. Notably, the right eye is offset downward relative to the left, creating an asymmetrical expression that the README describes as “Half way towards a smiley face.”

GGAItingw

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a simple smiley face using React and SVG, rendering a yellow circle with two black eyes. The face is drawn with three `<circle>` elements, where the head and eye positions are calculated from fixed width, height, and offset variables. The code uses ReactDOM to mount the component, and computes the head radius from the height minus a stroke width. It demonstrates basic SVG styling with fill, stroke, and positioning in a 960x500 viewport.

CChirag Bansal

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face rendered as an SVG, featuring a circular head with a black outline and two black eyes positioned symmetrically around the center. The face is incomplete, as it lacks a mouth, aligning with the title’s reference to a half-finished project. The visualization uses React to define the component structure, with ReactDOM rendering the SVG elements to the page. It employs hard-coded constants for dimensions and offsets, drawing circles with SVG’s built-in `circle` element and stroke properties.

Pplusbeauxjours

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face built from SVG circles, with a large head and two smaller eyes placed symmetrically around the center. React renders the SVG elements, while the dimensions and positions are computed from variables derived from a 960 by 500 viewport. The code uses ReactDOM to mount the component and assigns fixed values for the head radius, eye offsets, and stroke width. The face is incomplete, lacking a mouth, as described in the README.

AAnthoVDO

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

96% match