Make a face

100%

✓ Published0🌍 Public

Last edited Feb 26, 2021

Created on Feb 26, 2021

A static face built from SVG circles illustrates basic shape composition in React. The code renders a yellow head with black outline and two eye circles, all positioned with fixed coordinates inside an SVG canvas. React 17 and ReactDOM are loaded via CDN, while the markup is written directly in JSX within the HTML body. The example demonstrates how React components can encapsulate SVG elements, though it does not include interactive behavior or state management. The simple, hard-coded values show a minimal approach to drawing with vector graphics in a React context.

AI-generated description

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

Similar vizzes

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

93% match

Loading thumbnail…

Make a Face

A simple SVG face assembled from three circles: a large yellow head with a black stroke, and two smaller black eyes. The example demonstrates how static shapes can be arranged in SVG to create a recognizable figure. The code uses plain SVG elements within an HTML file, with React loaded but not actively used for rendering. The rendering approach relies on hardcoded coordinates and attributes, with no interactivity or data binding.

Mminghuirepo

91% match

Loading thumbnail…

Let's make a face with HTML, SVG, React

A static SVG face is drawn with yellow circular head and two black eyes, using React to render the markup. The example demonstrates how React components can output SVG elements directly, with hardcoded coordinates and dimensions for the face features. The code imports React and ReactDOM, while the HTML file loads React and ReactDOM from unpkg CDN. This is a minimal illustration of combining React's declarative UI approach with SVG's vector graphics capabilities, though no interactive behavior or data binding is shown.

WWhitney Hung

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

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

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

90% match

Loading thumbnail…

Hello Face!

A simple face rendered with React and SVG: a yellow circle with a thick black stroke forms the head, and two smaller circles serve as eyes. The React code uses functional components and JSX to define the SVG elements, with fixed constants for dimensions, offsets, and radii. ReactDOM renders the entire composition into the page’s root element, showcasing a basic declarative approach to vector graphics.

Lliuyuchen

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

90% match