Make a Face Part I

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

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

Part 1 of making face

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.

RRaghuram Lekkala

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

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

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

Let's Make a Face Part I

"Let's Make a Face Part I" displays a single yellow circle with a black outline rendered as an SVG face base. The visualization uses React 16.9.0 to construct the SVG element within a React component, with ReactDOM rendering it to the page. The circle's dimensions and positioning are hard-coded via width and height constants, while the SVG itself uses standard circle attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. The code currently only renders the face's outline, leaving facial features for subsequent development.

VVishwanath Hegde

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