Skip to main content
SimilarExport ZIP
100%

Face Part II

✓ Published0🌍 Public
RRichard Premvaree
Last edited Feb 12, 2023
Created on Feb 12, 2023
Forked from Face Part I

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Face Part 1

This example shows a simple face constructed from three SVG circles: a large yellow head with a black outline and two smaller black eyes. The head circle is positioned at the center of the viewport, while the eyes are offset horizontally to the left and right. The visualization is rendered directly in the index.html file using inline SVG elements, with React and ReactDOM loaded from CDNs but not actively used in the visible drawing. The code demonstrates basic SVG circle positioning with explicit cx and cy coordinates, along with fill, stroke, and stroke-width styling.

Jjdyeux
93% 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…

Face Part I

A yellow face rendered as an SVG circle with a thick black outline and two smaller black circles for eyes. The code uses raw SVG elements within an HTML page, styled with CSS for centering and removing page margins. It demonstrates basic React-free SVG composition, with the face drawn directly in the markup. The face is static, showing the use of SVG’s `<circle>` elements for simple geometric data visualization.

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

Face Part I

A simple yellow face is drawn as a large circle with two smaller circles for eyes, set against a black stroke outline. The visualization uses React to define the SVG elements and ReactDOM to render the component into the page. All dimensions and positions are computed from a fixed width and height, demonstrating a programmatic approach to basic shape composition.

CChandan Chugh
90% match
Loading thumbnail…

Face part 1

A yellow circular face rendered with SVG is centered on a black-outlined canvas, featuring two smaller black circles positioned as eyes. The visualization uses React and ReactDOM to structure the page, while the drawing is defined directly in an SVG element within the HTML markup. The code includes an introductory "hello" heading and a separate React component, though the face itself is entirely constructed from static SVG shapes without interactive behavior.

BBrandon Miranda
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
89% match