Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Mar 16, 2021

Created on Mar 16, 2021

This example shows the construction of a smiley face, starting with a yellow circular head and two black eyes, all rendered as SVG shapes. The face is built using React components, where the head’s radius and eye positions are computed from a fixed width and height. The code relies on React’s `ReactDOM.render` to mount the component, with the SVG elements positioned using center-based coordinates. It uses hardcoded values for the eye offset and radius, leaving the mouth unfinished as a work-in-progress.

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

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

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.

KKathleen Johnston

96% 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 yellow head with a black outline and two eyes—rendered in a React component. It demonstrates how to use React to declaratively construct an SVG scene, computing positions with the constants `centerX`, `centerY`, `eyeOffsetX`, `eyeOffsetY`, and `eyeRadius`. The code uses ReactDOM to mount the component into the DOM, and the SVG elements are styled with attributes like `fill`, `stroke`, and `stroke-width`. No interactivity or animation is present beyond the static frame.

PPatrick Byron Gattoc

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 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 partially constructed smiley face rendered as SVG, with a yellow circle for the head and two smaller black circles for eyes. The React code uses `React.createElement` to generate the SVG elements, while a static SVG markup in the HTML provides a reference for the intended layout. The face is incomplete, missing a mouth, as noted in the README. The code imports React and ReactDOM to mount the component, which currently contains only a placeholder comment, leaving the visual output entirely to the raw SVG in the body.

RRubanda

96% match