Skip to main content
SimilarExport ZIP
100%

Lets Make A Face Part II

✓ Published0🌍 Public
AAyamSrivastava
Last edited Feb 16, 2023
Created on Feb 16, 2023
Forked from Hello HTML

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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…

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
92% match
Loading thumbnail…

Face Part II

This example displays a simple face constructed from three SVG circles: a large yellow head with black stroke and two smaller eyes. The static visualization uses React and ReactDOM for structure, with the circles defined directly in the HTML. The code demonstrates JSX rendering through the App component, while the SVG elements are present in the DOM alongside the React-managed content.

RRichard Premvaree
91% 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
91% match
Loading thumbnail…

Let's Make a Face Part I

This example shows a simple, static face constructed from three SVG circles: a large yellow circle for the head and two smaller circles for the eyes, all centered on a 960 by 500 canvas. The rendering relies on React and ReactDOM to inject the SVG elements into the HTML page, while the `bundle.js` file executes the JavaScript. The face is drawn directly in the markup with hardcoded coordinates and styling, including a black stroke on the head circle, and does not involve any data processing or interactivity.

Jjamieagape
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

A React application renders a static yellow smiley face using SVG, drawing a single circle with a black stroke on a 960×500 canvas. The code imports React and ReactDOM, defines width, height, centered coordinates, and stroke width as constants, then renders the circle via `ReactDOM.render`. While the HTML skeleton hints at a future face with eyes, the current JavaScript only displays the circle, leaving the face incomplete. The example demonstrates basic React component structure and SVG circle elements in a minimal visualization.

Ggrace.chaeyeong.kim@gmail.com
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