Skip to main content
SimilarExport ZIP
100%

Fork of Let's Make a Face Part II

✓ Published2🌍 Public
Zzhangwbhi
Last edited Jul 31, 2021
Created on Jul 31, 2021

A smiley face rendered with two black eyes and a yellow circular head on an SVG canvas, built using React components and ReactDOM. The code defines fixed dimensions, center coordinates, and offset constants for the eyes, then renders circles with these computed positions and radii. It uses React’s declarative syntax to create SVG elements, with the head stroked in black and filled yellow, while the eyes are solid black circles. No interactivity or data loading is present, just static geometric shapes.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part 2

This fork of “Let's Make a Face Part 2” shows a partial smiley face: a large yellow circle with a black outline and two solid black eyes, positioned symmetrically on a transparent SVG canvas. The code uses React to render the SVG elements, with `ReactDOM.render` attaching the component to a root div. Hard-coded constants define the canvas dimensions, center, eye offset, and radius, while the circle elements receive explicit coordinates and stroke properties. No interaction is present; the view is static until reloaded.

Kkeitheade
95% match
Loading thumbnail…

Fork of Let's Make a Face Part 2

A React and SVG visualization renders a yellow smiley face on a 960-by-500 canvas. The code defines fixed coordinates for the head, eyes, and stroke width, drawing each circle with explicit `cx`, `cy`, and `r` attributes. It uses React 18, ReactDOM, and SVG primitives to compose the static face, with no interactive or animated behavior. The face is centered, featuring two eye circles offset horizontally, but lacks a mouth.

Nnoncomplex
95% match
Loading thumbnail…

Fork of Let's Make a Face Part II

A fork of the "Let's Make a Face Part II" example renders a simple smiley face using React and SVG. The visualization displays a yellow circle with black stroke for the head, plus two black circles as eyes, positioned symmetrically around the center via computed offsets. Built with React 18 and ReactDOM, it uses JSX to declaratively define SVG circle elements, with all dimensions and positions derived from constant variables for width, height, and eye placement.

PPakapone Supavarn
95% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face rendered as SVG, with a black circular face and two black eyes positioned symmetrically on either side of the center. The code defines constants for dimensions, offsets, and radii, then uses React to create three circle elements. It leverages ReactDOM to mount the component, with SVG attributes set via JSX, and the rendering relies on the React production build loaded from a CDN.

BBurak Senel
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
95% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static smiley face constructed from SVG circles: a large yellow head with a black outline and two smaller black circles for eyes. The code uses React and ReactDOM to manage the page, while the face itself is drawn directly in the markup. The rendering relies on SVG primitives within a fixed 960-by-500 viewport, with coordinates placed to center the head and position the eyes symmetrically. The project shows a foundational step toward a more complex face, with only the head and eyes present so far.

Ggzm17
94% match
Loading thumbnail…

Fork of Let's Make a Face Part II

This example shows a simple smiley face built from SVG circles, with a yellow face and two black eyes positioned symmetrically around the center. The app uses React and ReactDOM to render the SVG into the DOM, calculating all coordinates from width, height, and offset constants. The code sets explicit pixel values for the face radius, eye offsets, and stroke width, demonstrating how to compose basic shapes with React’s JSX syntax and SVG attributes.

Aaishwaryshivgan
94% 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
94% match