Skip to main content
SimilarExport ZIP
100%

face-off

✓ Published1🌍 Public
Ttobyviz
Last edited Aug 15, 2021
Created on Aug 14, 2021
Forked from Hello HTML

A yellow smiley face rendered as a set of SVG circles sits centered on a black-outlined head, with two dark eyes offset symmetrically. The React app uses hardcoded numeric constants for dimensions, stroke width, eye offset, and radius, drawing the face via three `<circle>` elements. Rendered with ReactDOM into a full-viewport SVG, the visualization demonstrates static geometric composition without interactivity or data binding, relying solely on declarative JSX props. The code leverages React 17’s production build and inline SVG, with no external data source or animation.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

smile face

The smile face example displays a simple yellow circle with two smaller black circles for eyes, rendered as static SVG shapes on a 960x500 canvas. It uses React 18.2.0 through a UMD script tag, though no React components are actually defined. The visualization is built entirely with raw SVG elements—a `<circle>` for the face and two `<circle>` elements for the eyes—each with explicit coordinates for positioning. The code loads React and logs ReactDOM to the console, but relies on pure markup without any dynamic behavior or data binding.

Yyankesswang
88% match
Loading thumbnail…

Let's Make a Face Part I

A static yellow smiley face rendered as SVG, with a black outlined circle for the head and two smaller unfilled circles for the eyes, appears against a blank viewport. The example uses React to structure the SVG elements directly in JSX, with hard-coded coordinates and dimensions for a 960×500 canvas. The code includes a separate React app that logs the React object and renders a simple heading, while the face is drawn in the HTML file using inline SVG tags. The rendering approach relies on basic SVG primitives without dynamic data or interaction.

Iillus0r
88% match
Loading thumbnail…

Smiley Face

A smiling face rendered as a static SVG graphic uses React 17 and ReactDOM to mount an app, though the visible face is drawn directly in the index.html file with hardcoded circle elements. The yellow outer circle, two black eye circles, and implied curved mouth are laid out with explicit pixel coordinates on a 960×500 canvas. The code does not implement any interaction or data-driven logic; it simply outputs a fixed, pre-defined facial composition.

JJasprado23
88% match
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
88% match
Loading thumbnail…

FACE SMILE

This example shows a simple static face rendered as a smiling yellow circle with two black eyes and a curved mouth, drawn using basic SVG shapes. The visualization uses React 18.2.0 for component structure and JavaScript to load the library, while the rendering is achieved through inline SVG elements like `<circle>` and a path for the smile. The code explicitly sets the viewport dimensions to 960 by 500 pixels and positions the face elements at fixed coordinates, with a yellow fill, black stroke, and thick outline. No interactive or data-driven behavior is present; it is a purely decorative demonstration of SVG within a React setup.

Ppriyanshu
88% match
Loading thumbnail…

Smiley face

A yellow circle with a black outline forms the face, containing two smaller black circles as eyes. The example demonstrates static SVG rendering with React, though the React library is loaded but not actively used for drawing. Instead, the visualization is created directly using SVG elements like `circle` for the face and eyes, with hardcoded coordinates and styling. The page loads React and ReactDOM via UMD bundles, but the final graphic relies purely on raw SVG markup within the HTML.

Ffutureofworld
88% 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
88% 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
88% match