Skip to main content
SimilarExport ZIP
100%

Fork of Smiley Face Part II

✓ Published0🌍 Public
Mmatg
Last edited Jan 15, 2022
Created on Jan 15, 2022

This fork of Matt Goo’s React smiley face renders a yellow head with two hollow eyes, sized to fill the browser viewport. The SVG circles are drawn relative to the window’s center, with the face’s radius set to half the viewport height. The code uses React’s `ReactDOM.render` to display the graphic, and computes all positions from `window.innerWidth` and `window.innerHeight`, producing a full-screen composition.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part II

This fork of Smiley Face Part II renders a full-screen yellow smiley face using React and SVG. The code calculates the center and dimensions from the browser window’s width and height, drawing a large yellow circle with a black stroke for the face, and places two unfilled eye circles based on fixed offsets from that center. It uses React 16.9.0 and ReactDOM to render the SVG directly into the page’s root element.

MMatthew Lau
94% match
Loading thumbnail…

Fork of Smiley Face Part II

A fork of “Smiley Face Part II” renders a classic yellow smiley face that fills the browser window, scaling its size to the viewport dimensions. The face is drawn with React components and SVG primitives, using two separate `<circle>` elements for the eyes and a larger `<circle>` for the face outline. The code positions the face via a `<g>` transform, centering it on the screen, and computes the face radius and eye offsets from window inner height and width. Only the head and eyes appear; no mouth or other features are shown.

Cchenxlong3
94% match
Loading thumbnail…

Fork of Smiley Face Part II

A responsive smiley face drawn with React and SVG fills the browser window. The face’s yellow circle, two eyes, and mouth are positioned relative to the viewport’s center using computed dimensions. React 16.9 renders the SVG elements via `ReactDOM.render`, with hardcoded offsets for facial features rather than interactive data.

MMatias Conde
94% match
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face fills the browser window, centered and scaled to the viewport’s dimensions. The face is constructed with three SVG circles: a large yellow head with a black stroke, and two smaller black eye circles positioned symmetrically. The React code uses `ReactDOM.render` to draw the SVG directly, computing coordinates from `window.innerWidth` and `window.innerHeight`. The face’s radius adapts to the available vertical space, and the eyes are offset by fixed pixel amounts.

Sseitzfab
94% match
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face rendered with React and SVG fills the browser window, with its size adapting to the viewport dimensions. The face features two black eyes and a yellow circular head outlined in black, though it omits a mouth. The code uses React 16.9 and ReactDOM to mount an SVG element, calculating the center, eye offsets, and radii based on `window.innerWidth` and `window.innerHeight`. All shapes are drawn as SVG `<circle>` elements within a transformed group.

BBjørnar Dalsnes
94% match
Loading thumbnail…

Fork of Smiley Face Part II

This fork of the Smiley Face Part II example renders a large yellow smiley face that scales to fill the browser window. The React application computes the face’s dimensions from `window.innerWidth` and `window.innerHeight`, centering the head and positioning two simple eye circles relative to that center. The visualization uses React’s `ReactDOM.render` to inject an SVG directly into the page, with the face’s body defined by a yellow circle with a black stroke, while the eyes are drawn as unfilled circles. No mouth is included in the final code, despite the name.

MMohamed Ali
94% match
Loading thumbnail…

Fork of Smiley Face Part II

This is a React-based SVG rendering of a smiley face that fills the browser window. The face is composed of simple circles: a large yellow circle with a black stroke for the head, and two smaller black circles for the eyes. The position and size of the face are calculated from the window’s inner width and height, using the `window.innerWidth` and `window.innerHeight` properties. The code uses the `React` and `ReactDOM` libraries to render the SVG element, with geometric values like `centerX`, `centerY`, and `eyeOffsetX` defined as constants.

Rrockumk
93% match
Loading thumbnail…

Fork of Smiley Face Part II

This fork of a smiley face visualization renders a yellow circle with black outline, two eye circles, and a mouth arc using React and SVG. The code computes positions from the window height to center the face vertically, with eye offsets and radii defined as variables. It uses React’s `ReactDOM.render` to inject the SVG into the page, while the height adapts to the browser’s innerHeight. The example demonstrates dynamic sizing, though it omits the mouth shape despite referencing it in comments.

Llistapuce
93% match