Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Jun 16, 2022

Created on Jun 16, 2022

This is a step-by-step tutorial for building a smiley face in SVG, shown as a bright yellow circle with two dark eye circles on a 960×500 canvas. The code renders the face directly using React 18’s `createRoot` and JavaScript, with SVG elements positioned via explicit `cx`, `cy`, and `r` attributes. The example is a static SVG drawing, and the accompanying README includes a YouTube video link, while the console logs "hey" to confirm the React script is running.

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 simple smiley face rendered as a yellow circle with two eyes, drawn using SVG shapes. The face is positioned at the center of a 960x500 canvas, with the main circle outlined in black and the eyes placed symmetrically off-center. The code uses React and ReactDOM to render the SVG elements, though the face itself is hardcoded directly in the HTML rather than generated through React components. The project also includes an embedded YouTube video and appears to be part of a tutorial series on building faces step by step.

MMeghana Bangari

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG smiley face renders a yellow circle with two black-outlined eyes centered on a 960 by 500 canvas. The face is built directly in the HTML markup using numbered `<circle>` elements, with the head at position (480, 250) and eyes offset horizontally. The example accompanies a video tutorial on constructing faces step by step. While the page loads React and ReactDOM from CDN scripts, the current visualization uses plain SVG geometry without any React components or interactive behavior.

Cchenxlong3

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a simple yellow smiley face built from three SVG circles: a large face outline and two smaller eyes. It uses React (version 16.9) to render the SVG elements declaratively, computing positions from constants like `centerX`, `centerY`, and `eyeOffsetX`. The face is drawn with a yellow fill, black stroke, and a stroke width of 10, while the eyes are plain black circles. The code defines the layout entirely with JavaScript variables and React components, avoiding any external data or geometry libraries.

Ssimrangajsinghani

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

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow circle with a black outline renders as the first step toward a smiley face, centered on a 960 by 500 SVG canvas. The shape uses React to create SVG elements, with the circle’s radius derived from the canvas height minus half the stroke width. The code imports React and ReactDOM, then renders the SVG through `ReactDOM.render`, setting the center coordinates and stroke attributes directly. The example demonstrates basic SVG drawing within a React component, with no facial features yet added.

JJoora Song

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

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static yellow smiley face made from one large circle and two smaller eye circles, all rendered as SVG elements within a 960x500 viewport. The face uses hardcoded coordinates and stroke widths to position the features, with a yellow fill and black outline for the head. Built with React 16.9, it renders directly through hardcoded JSX inside the index.html file rather than using JavaScript logic to compute positions. The video embedded in the README suggests it is part of a tutorial series on building faces with React and SVG.

KKate-2222004

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