Half of a Face

100%

Half of a Face

✓ Published0🌍 Public

Last edited Dec 20, 2021

Created on Dec 20, 2021

A yellow circle with a black outline and two black eyes forms a minimal face on a 960-by-500 SVG canvas. The static visualization uses pre-defined circle elements with hard-coded coordinates and radii, placing the eyes symmetrically around the center. React 17 is loaded via a UMD script, though the bundled JavaScript merely logs the React import and does not drive any interactive behavior. The rendering relies solely on SVG shapes without additional data or dynamic computation.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Face 1

A yellow circle with two black circular eyes forms a simple, static face. The SVG canvas is 960 by 500 pixels, and the face is centered by setting the main circle's `cx` and `cy` to half of these dimensions. The code uses raw SVG elements (`circle`) and CSS to remove default page margins. The JavaScript and HTML files provide a minimal page structure, though the visualization itself requires no scripting or external libraries.

Eequiilibriumdigital

86% match

Loading thumbnail…

Part-1

A yellow circle with a black outline and two small black eyes forms a simple face, rendered as a full-screen SVG. The face is centered on the screen using a translated group element, with the face radius tied to half the window height. Built with React and ReactDOM, the component uses SVG `<circle>` elements for the face, eyes, and stroke, updating its size based on the browser viewport dimensions.

MMojgan

86% match

Loading thumbnail…

Face Part I

A yellow circle with a black outline takes up most of the canvas, with two smaller black circles positioned as eyes, leaving the face incomplete. The drawing is rendered as static SVG elements using React 18, with the `<circle>` primitives for each shape. The code directly sets coordinates and dimensions, such as a center at (480, 250) and a radius of 245 for the head, with eyes offset horizontally. No interactive behavior or animation is present; the example simply shows the basic geometric construction of a partial smiley face.

Ssommerh

86% match

Loading thumbnail…

Face

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.

JJohanna Magdalena

86% match

Loading thumbnail…

Smiley Face Halfway

This visualization displays a smiling face with two eyes, rendered as a large yellow circle with a black outline, positioned at the center of an SVG canvas. The example demonstrates React’s ability to manage SVG elements through the `ReactDOM.render` method, while also including static SVG circles for the eyes and face directly in the HTML. The code uses React 18.2.0 along with ReactDOM, and the face’s dimensions are computed from the viewport width and height. The rendering approach combines React-managed state with hardcoded SVG shapes, illustrating a hybrid of declarative and static SVG markup.

JJanit Modi

86% match

Loading thumbnail…

Untitled

This example renders a static yellow circle with two black circular eyes on an SVG canvas, mimicking a simple face. The visualization is built using React 17, with the outer shape and facial features defined directly as SVG circle elements. The page loads React from a CDN and logs the imported React object to the console, though no dynamic state or interactivity is implemented. The drawing is purely declarative, using fixed coordinates and radii for each shape.

EEUHaq

85% match

Loading thumbnail…

Face Part II

A simple SVG face graphic displays a yellow circle with black outline for the head and two smaller circles for eyes. The React component in index.js uses JSX to render the SVG elements, calculating dimensions and positions from constants like `centerX`, `centerY`, `radius`, and `eyeOffsetX`/`eyeOffsetY`. ReactDOM renders this component into the page, with dependencies loaded via unpkg for React 17. The code demonstrates basic composition of SVG shapes within a React application, producing a static visual without interactivity or data.

Kkripton-it

85% match