Skip to main content
SimilarExport ZIP
100%

Face 2

✓ Published1🌍 Public
Eequiilibriumdigital
Last edited Mar 25, 2021
Created on Mar 25, 2021
Forked from Face 1

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.

AI-generated description

Stage 2 of smiley face using React

MIT Licensed

Similar vizzes

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

Face2

A smiley face rendered with React and SVG, drawn as yellow circular background, two eyes, and an arc-shaped mouth. The visualization uses hardcoded geometry rather than external data, positioning elements relative to the window dimensions. React components (BackgroundCircle and Eyes) generate the SVG markup, while the mouth path is computed using the d3.arc API from d3.v4. The example demonstrates declarative component composition with D3’s arc generator for path generation.

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

Face I and II

A smiling face built with two yellow circles, black stroke outlines, and two eyes rendered side-by-side. The face is drawn as a static SVG graphic, with one version created using direct HTML markup and the other using React components. The code uses React 18 and ReactDOM to render the SVG elements, computing positions from fixed width, height, and eye offset constants. The visualization demonstrates declarative component-based SVG rendering without any interactive behavior.

HHimanshu Sharma
90% match
Loading thumbnail…

Let's Make a Face Part II

A smiley face rendered as two black eyes on a yellow circular head, built with React 16.9 and SVG. The component defines fixed dimensions for the canvas, calculates the face’s center, and uses offset constants for eye positions, with stroke width and radius as explicit variables. It renders three circles: a yellow outer circle with a black stroke, and two smaller black eyes placed symmetrically around the center. The code uses ReactDOM to mount the component into a root element, with styling that hides page overflow.

PPolina Sysoeva
89% 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
89% match
Loading thumbnail…

Face - tweakage

A cheerful yellow smiley face rendered as a static SVG uses D3's `arc` generator to create a mouth and React to compose a set of positioned circles and rectangles for eyes and facial details. The face is centered within a 960 by 500 viewport, with the head drawn as a circle and annotated by two black eye circles, white highlights, and red rectangular accents. The code demonstrates a React functional component that outputs SVG markup directly, combining D3 shape utilities with React's declarative element creation.

Eequiilibriumdigital
89% match
Loading thumbnail…

Face

A yellow circle with a black border forms a face, featuring two black eyes and a black mouth rendered as a simple line. Built with React and D3, the SVG face is centered in a 960×500 viewport, with each eye placed using fixed offsets and the mouth drawn via D3’s `arc` generator to produce a smile-shaped path. The face’s outline uses a thick stroke, while the eyes and mouth rely on basic SVG circle and path elements.

PPratik Gohil
89% match