100%

2.00 Lets Make a Face Part 2 (React)

✓ Published2🌍 Public

Last edited Apr 1, 2021

Created on Mar 31, 2021

A yellow circle with a black outline forms a face, defined by two smaller black circles for eyes positioned within a 960 by 500 pixel SVG canvas. The React application renders the SVG directly, using hardcoded width, height, and stroke variables to set the face’s size and outline thickness, while the eye positions derive from proportional fractions of the canvas dimensions.

AI-generated description

Using React and Dynamic Paramaters

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face Part II

A face is drawn as a yellow circle with a black outline, accompanied by two smaller black circles serving as eyes, positioned symmetrically around the center. The visualization is built with React, using inline SVG elements to render the shapes, with all coordinates and dimensions defined as constants. The React `render` method places the composed SVG into a root `<div>` element, and the page imports React and ReactDOM from unpkg CDN links.

Eeladabramovich

91% match

Loading thumbnail…

Let's Make a Face Part II

This example demonstrates a React and SVG-based face component, rendering a yellow circle as the head with a single eye placed relative to the screen center. The code computes the viewport dimensions and positions the SVG elements using JavaScript arithmetic on window.innerWidth and window.innerHeight. React manages the SVG elements through the `ReactDOM.render` method, while the eye's coordinates are derived from offset variables. The current output is only partially complete, showing the head and one eye, with commented-out code hinting at future additions like a mouth and second eye.

JJoe

91% match

Loading thumbnail…

Let's Make a Face Part II (React)

A yellow face rendered with SVG circles, drawn using computed dimensions from the browser viewport. It displays a head, two eyes, and a mouth, all positioned relative to the center of the window. The visualization uses React 16.9, ReactDOM, and JSX to declaratively define the SVG elements. The face is built from a yellow circle with a black stroke, plus smaller circles for the eyes, with the mouth radius defined but not rendered in the current code.

NNikhil Reddy Manda

90% match

Loading thumbnail…

Let's Make a Face Part I

A yellow face with black outlined eyes is drawn as a simple SVG composition using React. The code renders circles for the face and eyes, with fixed positions calculated from the viewport dimensions. It uses ReactDOM to mount the component, and the SVG elements are defined directly in JSX with explicit attributes for radius, stroke, and fill.

DdRAPGb

90% match

Loading thumbnail…

Make a Face Part II with React

Yellow-and-black SVG facial features are drawn on a 960 by 500 canvas, with a large circular face, two eyes, and an implied smile, all positioned using fixed pixel coordinates. The React component `App` renders nested `<circle>` elements for the face and eyes, computing their centers from `centerX`, `centerY`, and offset constants. React 16.13.1 and ReactDOM manage the mounting into the `#root` element, while the SVG output is structured with inline JSX attributes like `stroke-width`. The visualization demonstrates declarative, component-based geometry without external charting libraries.

Ooliver488

90% match

Loading thumbnail…

Face Part II

A simple SVG face graphic displays a yellow circle with black outline for the head and two smaller circles for eyes. The React component in index.js uses JSX to render the SVG elements, calculating dimensions and positions from constants like `centerX`, `centerY`, `radius`, and `eyeOffsetX`/`eyeOffsetY`. ReactDOM renders this component into the page, with dependencies loaded via unpkg for React 17. The code demonstrates basic composition of SVG shapes within a React application, producing a static visual without interactivity or data.

Kkripton-it

89% match

Loading thumbnail…

Make a Face Part I

This example shows a yellow circle centered in an SVG canvas, with two smaller black-outlined circles positioned symmetrically to suggest eyes, leaving the face incomplete. The visualization is built using React 17 and renders directly to SVG elements. The main face is defined with a `circle` element using `cx`, `cy`, and `r` properties, while the eye shapes are hardcoded with fixed coordinates. The code sets the canvas dimensions to 960 by 500 pixels and imports React and ReactDOM from UMD builds to mount the app into the root div.

Jjohn19696

89% match

Loading thumbnail…

Let's Make a Face Part II

This example presents a yellow smiley face drawn with simple geometric shapes in an SVG canvas. A large yellow circle forms the head, outlined with a black stroke, and two smaller black circles serve as the eyes. The code uses the React library, along with ReactDOM for rendering, to build the component. Explicit numeric constants define the canvas dimensions, eye placement, and stroke widths, making the layout easily adjustable. The application is structured as a set of nested `<circle>` elements within a single `<svg>` tag, demonstrating a straightforward approach to creating basic vector illustrations.

Ccoobeet

89% match