Let's Make a Face Part II

100%

Let's Make a Face Part II

✓ Published0🌍 Public

Last edited Mar 23, 2021

Created on Mar 23, 2021

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

94% match

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

92% match

Loading thumbnail…

Let's Make a Face Part II

This example presents a simple yellow smiley face rendered as an SVG graphic using React. The visualization shows a large circle for the face and two smaller circles for the eyes, all centered within a 960 by 500 canvas. The code defines geometric constants for positioning and sizing, then uses React’s `ReactDOM.render` to inject the SVG elements into the page. It relies on the React and ReactDOM libraries loaded from unpkg, with the SVG markup constructed directly through React component syntax.

FFábio Correia

92% match

Loading thumbnail…

Lets Make A Face Part II

This example uses React and ReactDOM to render a static SVG face. The visualization shows a yellow circle with black stroke as the head, and two smaller black circles as eyes, positioned on a 960 by 500 canvas. The code directly embeds SVG elements, including circles with specific coordinates and styles, within the HTML page, while React manages the page structure. The rendering approach relies on raw SVG markup rather than a charting library.

AAyamSrivastava

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

91% match

Loading thumbnail…

2.00 Lets Make a Face Part 2 (React)

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.

EEric Weiss

91% match

Loading thumbnail…

Let's make a face: part 2

This example shows a yellow smiley face rendered as two eyes on a circular head, drawn entirely with SVG circles. It demonstrates how React manages declarative SVG attributes, using `cx`, `cy`, `r`, `fill`, and `stroke` properties. The code defines constants for width, height, center coordinates, and offsets, then computes eye positions from those values. It uses React 17 and ReactDOM to render the `<App />` component into the DOM, with all geometry derived from the same base variables to keep the layout consistent. The face is partially complete, omitting the mouth for a future step.

Rrvdv

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

90% match