Part 1 of making face

100%

Part 1 of making face

✓ Published0🌍 Public

Last edited Dec 13, 2022

Created on Dec 13, 2022

This visualization builds a simple face from basic SVG primitives, placing a yellow circle with a black stroke as the head and two smaller filled circles as eyes. The face is drawn directly in the HTML markup rather than through React components, despite the page loading both React 18 and ReactDOM for the bundled application. The SVG canvas is 960 by 500 pixels, with eye positions calculated from the center point at 480,250, offset to the left and right. The code includes a commented-out formula for centering elements based on dimensions and stroke width.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Part 1 making Face

A smiling face is drawn with simple SVG shapes: a yellow circle for the head, and two smaller black circles for the eyes. The visualization is a basic example of combining SVG markup with React, using the `react` and `react-dom` libraries to render a JSX header onto the page. The code also includes a static SVG face, created directly in the HTML, that demonstrates the geometric positioning of elements within a 960 by 600 canvas.

PPedram

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

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

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

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

90% 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…

Let's Make a Face Part I

This example draws a simple face using three SVG circles: a large yellow circle for the head and two smaller black circles for eyes. The circles are positioned manually with fixed coordinates, with the head centered at (480, 250) and a radius of 245, while the eyes sit at (350, 180) and (600, 180) with a radius of 50. The page loads React 16.13.1 from a UMD CDN, though it only logs the React object to the console and does not use React for rendering. The SVG is authored directly in the HTML with static attributes, using fill, stroke, and stroke-width properties.

MMichael Hodge

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

90% match