Fork of Let's Make a Face Part 2

100%

Fork of Let's Make a Face Part 2

✓ Published0🌍 Public

Last edited Mar 3, 2021

Created on Mar 2, 2021

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face Part I” plots a static smiley face using React and SVG primitives. The visualization shows a yellow circle head with two black eye circles, rendered directly in the HTML with hardcoded coordinates. React 17 and ReactDOM manage the page structure, while the facial elements are drawn as SVG `<circle>` elements with explicit fill, stroke, and stroke-width attributes. No interactive behavior or data binding is present; the example serves as a minimal, self-contained illustration of SVG drawing within a React shell.

LLejla Kafedzic

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 simple React application renders a yellow smiley face as an SVG graphic. It uses hard-coded coordinates and constants to draw three circles: a large face outline with a black stroke, and two smaller black circles for eyes. The code defines variables for the SVG canvas dimensions, face center, stroke width, and eye offsets, then renders the elements using JSX. The visualization demonstrates basic SVG shape composition within a React component, with no interactive or data-driven behavior.

DDawn

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a simple smiley face using SVG primitives within a React application. The visualization displays a yellow circle with a black stroke for the head, alongside two smaller circles representing eyes, all positioned using explicit coordinates. The code uses React and ReactDOM to manage the rendering, while the SVG elements are defined directly in the HTML file. It also includes a JavaScript file that logs ReactDOM and renders a separate "Hello JSX" message, though the face itself is static and does not respond to interaction.

MManjot Pal Singh

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