Let's Make a Face Part I

100%

Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Jul 8, 2020

Created on Jul 8, 2020

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

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

94% match

Loading thumbnail…

Let's Make a Face Part I

This example renders a simple face using three SVG circles: a large yellow circle with a black stroke for the head, and two smaller black circles for eyes. The markup is hand-coded directly in the HTML file, with inline attributes for positioning (cx, cy) and radius (r). It uses no external JavaScript libraries, only plain HTML and CSS. The face is centered on a 960 by 500 pixel canvas, with the eyes placed symmetrically around the center point.

CCees Klap

94% match

Loading thumbnail…

Let's Make a Face Part I

A static SVG face composed of three circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically. The circles are drawn using raw SVG elements, with coordinates and radii hardcoded directly in the markup. This example uses plain HTML and CSS, with no JavaScript libraries or data sources, to demonstrate basic shape composition and styling within an SVG canvas.

Jjwlam83

94% match

Loading thumbnail…

Lets make a face (Part-I)

This example shows a simple cartoon face built from three SVG circles: a large yellow head and two smaller black-outlined eyes. The code uses React 16.12.0 loaded via a UMD script, and renders the face directly through static SVG markup in the HTML file. The face is drawn with `circle` elements, using explicit `cx`, `cy`, `r`, `fill`, and `stroke-width` attributes. The page sets a light blue background and hides overflow, with the face centered on a 960×500 canvas.

NNita

93% match

Loading thumbnail…

Let's Make a Face Part I

A static SVG face built with React 16.12.0 displays a yellow circle with black stroke as the head, plus two smaller unfilled circles for eyes, drawn at fixed coordinates. The example uses raw JSX-style SVG elements within an HTML file, with React loaded from a CDN, and includes a placeholder script tag. The face lacks a mouth, showing a half-finished construction.

JJenBirchmore

91% match

Loading thumbnail…

Let's Make a Face Part I

This example builds toward a smiley face by rendering a large yellow circle with a black outline, two smaller filled circles for eyes, and space left for a future mouth. The SVG is written directly in the HTML using React, with React 16.7 loaded from a CDN and a separate `bundle.js` script. Static coordinates position the face elements on a 960 by 500 canvas, and the code logs the React object to the console, demonstrating a minimal React-based SVG composition.

KKenneth Goh

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

91% match