Skip to main content
SimilarExport ZIP
100%

Face

✓ Published0🌍 Public
JJohanna Magdalena
Last edited Nov 18, 2021
Created on Nov 18, 2021
Forked from Hello HTML

A smiling face rendered as a simple SVG graphic, built with React components. The visualization displays a yellow circle with a black outline for the head, and two smaller black circles positioned as eyes. The code uses React and ReactDOM from UMD bundles to manage the rendering, while the SVG elements (circle tags) are written directly in the index.html file. The face is centered on a 960x500 canvas with fixed pixel coordinates, and the page is styled with a hidden overflow to remove scrollbars.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello Face

A smiling face rendered from three yellow and black SVG circles sits on a plain white background. The code uses React and ReactDOM to render the static graphic, with the face’s head, left eye, and right eye defined as inline `<circle>` elements. The markup is hardcoded in the HTML file, with no interactive data or dynamic behavior. The visualization demonstrates a minimal, non-data-driven composition using SVG primitives within a React component.

AAndrés López
92% match
Loading thumbnail…

Face

The example renders a yellow, stroke-outlined face using basic SVG shapes within a React application. It constructs the face from two circle elements for the eyes and a larger circle for the head, all drawn on an 800-by-800 canvas. The code uses React and ReactDOM to mount the component, while the SVG is hardcoded directly in the markup. The visualization demonstrates a simple, static composition without interactive behavior or data-driven updates.

AAkarsh Priyadarshan
92% 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
91% match
Loading thumbnail…

Face II

A smiling face rendered as a simple data visualization uses React and ReactDOM to create an SVG graphic. The code computes the viewport dimensions to center a yellow circle with a black outline, adds two solid black eyes, and omits a mouth. The face is drawn using SVG circle elements within a transformed group, with coordinates and radii set as constants. The example demonstrates static SVG rendering through React's declarative component structure, where the entire graphic is defined in JSX and mounted to the DOM.

Pporrasgp
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
91% match
Loading thumbnail…

Face

An abstract face composed of simple SVG shapes is drawn on a 960 by 500 canvas. A large yellow circle with a black outline forms the head, while two smaller unfilled circles on the left and right sides represent the eyes. The visualization is built using React and rendered through SVG, with the basic layout defined directly in the HTML and supplemental code in the JavaScript file. The title “Face” is displayed as the page’s header.

CCasado7
91% match
Loading thumbnail…

Face 2

A smiling face rendered as a yellow circle with two black eyes, built using React and SVG. The component defines fixed dimensions and positions eyes symmetrically around the center. React 17 renders the SVG elements via `ReactDOM.render`, with the face’s size and eye placement determined by the viewport height and designated offsets. The code uses explicit circle elements for the head and eyes.

Eequiilibriumdigital
91% match
Loading thumbnail…

Face

This example shows a simple yellow smiley face drawn on a blank background, with two unfilled circles serving as eyes. The face is rendered as a static SVG graphic within a React 17 application, using the production build of the React UMD library. Directly placed `<circle>` elements define the face’s outline and features, with a thick black stroke for the main circle. No interactivity or animation is present, and the design is hardcoded in the HTML file rather than generated dynamically.

RRashi1510
90% match