Face2

100%

✓ Published0🌍 Public

Last edited Feb 27, 2021

Created on Feb 26, 2021

This example shows a face constructed from three circles drawn on a 960 by 500 SVG canvas: a large blue head with a red outline, and two smaller circles for eyes—one cyan and one maroon. The code uses React 17 in a minimal HTML page, but the actual rendering is done through declarative SVG elements within a static `index.html` file. The page includes minimal CSS styling to remove margins and hide overflow, and the script logs a confirmation message to the console. The visualization relies on raw SVG markup rather than a data-driven approach.

AI-generated description

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

Similar vizzes

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

89% match

Loading thumbnail…

Face I

A stylized face rendered as a static SVG graphic, built from three circles: a large paleturquoise head with a black outline and two small pupils as dark dots. The composition is centered on a 960 by 500 canvas. The example uses raw SVG markup within an HTML page, with React and ReactDOM loaded via CDN, though the JavaScript code itself only logs the React object and does not drive the drawing.

AAurore Paligot

89% match

Loading thumbnail…

Face SVG

This example shows a simple face constructed from SVG circles inside an HTML page. The code uses SVG elements—a large yellow circle for the head and two smaller circles for eyes—rendered through static markup. The SVG canvas is set to 960 by 500 pixels, with the face centered and framed by a black stroke. It relies on plain CSS for page margins and overflow control, with no additional JavaScript or framework, despite the React-ready environment.

AAlexander Maina

88% match

Loading thumbnail…

Face

An abstract face composed of simple SVG shapes is drawn on a 960 by 500 canvas. A large yellow circle with a black outline forms the head, while two smaller unfilled circles on the left and right sides represent the eyes. The visualization is built using React and rendered through SVG, with the basic layout defined directly in the HTML and supplemental code in the JavaScript file. The title “Face” is displayed as the page’s header.

CCasado7

88% match

Loading thumbnail…

Face

The example renders a yellow, stroke-outlined face using basic SVG shapes within a React application. It constructs the face from two circle elements for the eyes and a larger circle for the head, all drawn on an 800-by-800 canvas. The code uses React and ReactDOM to mount the component, while the SVG is hardcoded directly in the markup. The visualization demonstrates a simple, static composition without interactive behavior or data-driven updates.

AAkarsh Priyadarshan

87% match

Loading thumbnail…

Let's make a face - Part I

A simple SVG face composed of three overlapping circles—a large yellow head and two black eyes—rendered in a fixed 960×500 viewport. The example demonstrates static SVG drawing within a plain HTML page, with the React library loaded via CDN but only used to log the global `React` object to the console. No interactive behavior or data binding occurs; the face is defined directly with circle coordinates and stroke properties in the markup. The code relies on native SVG elements and React 16.9, with styling presumably applied via an external stylesheet.

BBagaski

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

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

87% match