Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Oct 17, 2021

Created on Oct 17, 2021

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.

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

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static, yellow smiley face constructed from three SVG circles: a large head and two smaller eyes, all rendered on a 960-by-500 canvas. The code uses React and ReactDOM to manage the page, while the drawing itself relies on raw SVG elements with hard-coded coordinates and stroke properties. A linked YouTube video explains the creation process, and the simple visual output demonstrates basic shape composition without any interactive or animated behavior.

JJosephK98

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face drawn as three SVG circles: two small black eyes and one large yellow head with a black outline. The face is centered on an 960×500 canvas, with the head positioned at the center and the eyes offset horizontally. The code uses React to load the library, followed by raw JSX elements rendered directly in the HTML. React 17.0.2 is loaded via a UMD build, while the SVG markup is written inline without additional visualization libraries.

AAdham Elkelany

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face rendered as a circle with two eyes, built using React 18 and SVG. The code defines fixed dimensions for an SVG canvas, positions the face center and eyes using calculated offsets, and draws each circle with explicit fill and stroke attributes. The face is rendered through a React component that outputs SVG elements, with the eyes lacking any fill or stroke properties, leaving them invisible against the yellow background. The example demonstrates a simple static composition without interactivity or data binding.

Ttshardey

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face rendered as an SVG circle with two smaller circles for eyes, positioned symmetrically around the center of a 960×500 canvas. The face is drawn using React and ReactDOM, with the main circle's radius and eye offsets defined as variables derived from the canvas dimensions. The code uses inline SVG elements within a React component, computed from constants like `centerX`, `centerY`, `strokWidth`, `eyeOfsetX`, and `eyeOfsetY` to maintain consistent spacing. The rendering relies on React 16.9 and ReactDOM’s `render` method to mount the component into the DOM.

Wweny1109

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

95% match