Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Jul 26, 2021

Created on Jul 26, 2021

This example demonstrates the initial steps of constructing a face using React and SVG, showing two black eye circles positioned on a larger yellow circle that serves as the head. The code uses React 16.9.0 via UMD builds and ReactDOM, with SVG elements rendered directly in the HTML. The drawing employs fixed coordinates—eyes placed at cx 350 and 600, cy 180—on a 960×500 canvas, with a yellow circle centered at (480, 250) featuring a black stroke. The fork builds on an existing tutorial, producing a static, halfway-complete smiley face.

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

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

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a simple smiley face using React and SVG, rendering two black eyes and a yellow circular head on a 960-by-500 canvas. The code defines SVG circle elements directly in JSX, with fixed coordinates and stroke properties, while a linked YouTube video explains the drawing process. The visualization demonstrates basic SVG shape composition without data binding or interactivity, relying on static attributes for positioning and styling. The page imports React via a UMD script and logs the React object to the console, but does not use any state or component logic.

Ddeepshringi

94% 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 head and two black eyes, rendered centered on a 960-by-500 canvas. The React component defines numeric constants for the head radius, eye offset, and stroke width, then passes them as SVG attributes to circle elements. It uses React 18 and ReactDOM to render the static SVG directly into the DOM, with no animation or interactivity. The drawing is a foundational step toward a more complete face, as the title suggests.

Ssunyixia025@gmail.com

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face built from three SVG circles, with two black eyes positioned on either side of the face’s center. It uses React and ReactDOM to render the SVG elements, calculating circle positions from width, height, and offset constants. The face itself is drawn with a yellow fill and black stroke, while the eyes use fixed radii and offsets from the center, demonstrating basic declarative SVG composition within a React component.

Aabhashdiu

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This is a fork of an interactive face-building example that outlines a yellow smiley face using SVG circles. It shows the initial stage of constructing a face, with two black eye circles positioned on a larger yellow circle that has a black stroke border. The example uses React and ReactDOM for the application framework, while the rendering is handled entirely through SVG elements defined directly in the HTML file, with a bundled JavaScript file providing the application logic.

Jjamlicker

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows the initial steps of building a smiley face with SVG shapes. A large yellow circle with a black stroke forms the head, centered at (480, 250) with a radius of 245. Two smaller black circles serve as eyes, placed symmetrically to the left and right of center. The code uses plain React elements within an SVG container, with the `index.html` file loading React 17 via CDN and setting the viewport to 960 by 500 pixels. No facial features such as a mouth have been added yet, leaving the face incomplete.

MMatthewNunes

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow circle with a black outline centered on a 960-by-500 SVG canvas, representing the first step toward building a smiley face. It uses React 18 to render the SVG element, with the circle’s dimensions and stroke styling defined directly in JSX. The code relies on ReactDOM.render to mount the component into the page’s root div, while commented-out code hints at future eye placement calculations.

CChristian Rohrer

94% match