Fork of Fork of Let's Make a Face Part I

100%

Fork of Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Feb 27, 2021

Created on Feb 27, 2021

Forked from Fork of Let's Make a Face Part I

This interactive React-based visualization demonstrates the construction of a smiley face using SVG primitives. The display shows a large yellow circle as the head, with two smaller black circles for eyes, rendered against a blank canvas. The code leverages ReactDOM to mount the component and uses inline SVG elements with explicit coordinate and radius attributes. A YouTube tutorial embedded in the page provides additional context for how the face is assembled 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 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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A React and SVG visualization uses circles to render a simplified smiley face. The face is drawn with a yellow circle outlined in black, and two smaller circles serve as eyes, positioned symmetrically around the center. The code defines constants for dimensions, offsets, and radii, then constructs the SVG elements using React and renders them into the DOM via ReactDOM. It references an instructional YouTube video but contains no interactive behavior.

Aalfredwang0707

94% match

Loading thumbnail…

Fork of Let's Make a Face Part 2

This interactive React visualization draws a simple smiley face using SVG primitives. A yellow circle with a black stroke represents the face, while two smaller circles serve as eyes at fixed positions. The code computes layout values such as center coordinates and stroke width, then renders the shapes via ReactDOM. It uses React 17 and relies on SVG circle elements for rendering.

AAleksandarNe11

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This interactive visualization displays a simple smiley face rendered with scalable vector graphics. The face consists of a yellow circle with a black outline, two smaller circles serving as eyes, and a central representation of a face. The code uses React to structure the SVG elements, with ReactDOM to render the component tree into the web page. The drawing dimensions adapt to the browser window size, positioning the face at the center and eye circles offset horizontally and vertically from the center. The example demonstrates basic geometric shapes and proportional sizing within a JavaScript-driven SVG canvas.

Jjonasveenhues

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization displays a simple smiley face built from three SVG circles: a large yellow face with a black outline and two smaller black eyes. The code uses React, loaded via CDN, to render the SVG elements directly in an HTML page, with the face centered at coordinates (480, 250) and eyes positioned symmetrically at offsets from the center. The SVG is configured with a width of 960 and height of 500, and styles in the body remove margins to allow the graphic to fill the viewport. The example appears to be an initial step toward a more complex face.

CChin-Long Shu

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This interactive example displays a cartoon smiley face rendered as a yellow circle with black outline and two smaller circles for eyes. The visualization uses React and SVG primitives, with fixed coordinates for each circle element directly in the markup. The React code, using `ReactDOM.render`, injects only the face’s main circle into the DOM, while the static HTML includes the eye circles. The overall scene is a simple part one of a face-building exercise, showcasing basic SVG circle placement within a 960 by 500 viewport.

TTestDataGuy

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This interactive example demonstrates a React-based smiley face constructed from basic SVG shapes, with a yellow circle for the head and two smaller black circles for the eyes. The code uses React 17 and ReactDOM to render the elements, while the index.html file includes commented-out SVG markup showing the planned coordinates for the face components. Although the current version only displays a simple "Hello JSX" heading, the repository’s README and video link indicate the project’s goal of building a complete facial expression step by step. The example highlights how React can manage SVG rendering in a straightforward, component-based manner.

Hheiltutanvidare

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