Lets make a face (Part-I)

100%

Lets make a face (Part-I)

✓ Published0🌍 Public

Last edited Jan 23, 2020

Created on Jan 23, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

92% match

Loading thumbnail…

Make a Face

This example shows a simple, static face built from three SVG circles: a large yellow head with a black outline and two smaller black eyes positioned symmetrically on the face. The code uses React 18 to render the structure, with the SVG elements defined directly in the HTML file. The circles are styled using standard SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke-width`, demonstrating basic geometric composition without any interactive or animated behavior.

NNicolas Neira

92% match

Loading thumbnail…

Let's make a face - Part I

This visualization builds a simple cartoon face from basic SVG shapes. It draws a large yellow circle for the head, two smaller black circles for eyes, and a curved path that forms a smiling mouth. The code uses raw SVG elements—`circle` and `path`—with hardcoded coordinates and styling attributes like `fill`, `stroke`, and `stroke-width`. The entire scene is rendered in a 500x960 viewBox without any JavaScript libraries, relying solely on React's rendering of the SVG markup within an HTML page.

AAna Penedos

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

91% match

Loading thumbnail…

Making a face

This example shows a simple yellow face constructed from three SVG circles on a 960-by-500 canvas. The face’s head is drawn with a large yellow circle outlined in black, while two smaller black circles serve as eyes, positioned symmetrically around the center. The code uses plain SVG elements (circle) with attributes for radius, center coordinates, fill, and stroke, rendered directly in HTML without any JavaScript libraries or data sources. The visual result is a minimal, static illustration that demonstrates basic SVG shape composition and positioning.

SSahhimanshu7

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

91% match