Skip to main content
SimilarExport ZIP
100%

Fork of Smiley Face Part II

✓ Published0🌍 Public
MMiles Whitman
Last edited Jul 17, 2021
Created on Jul 17, 2021

A React application renders a yellow smiley face that scales to fill the browser window. Using React 16.9 and ReactDOM, the SVG drawing computes dimensions from `window.innerWidth` and `window.innerHeight`, positioning a face circle, two eyes, and a mouth as SVG elements. The code demonstrates dynamic sizing and centered transforms, though the mouth is notably absent from the rendered output despite being defined in the commented HTML reference. The face circle uses `r={centerY - strokeWidth / 2}` to adapt its radius based on viewport height.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part II

A React-based smiley face visualization renders a yellow circle with black outline, two eyes, and a mouth, dynamically sized to fit the browser window. The code uses React 16.9 and ReactDOM to mount the SVG, computing dimensions from `window.innerWidth` and `window.innerHeight` to center the face. Basic SVG elements like `circle` and `g` handle the drawing, with a commented-out static version showing the original specification. The implementation adapts element positions and radii based on viewport size, though the mouth is defined in variables but not drawn.

TThfc1991
96% match
Loading thumbnail…

Fork of Smiley Face Part II

A React application renders a full-screen yellow smiley face using SVG, with the face centered and scaled to the browser window. The face includes two black eyes and a yellow circular head with a thick black stroke, though it omits a mouth. The code computes dimensions from `window.innerWidth` and `window.innerHeight`, then uses React DOM to inject SVG elements like `<circle>` into the page. The implementation relies on React 16.9 for component rendering and updates the visualization responsively based on viewport size.

SSophia Chiao
96% 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
96% match
Loading thumbnail…

Fork of Smiley Face Part II

A React and SVG visualization renders a smiley face that scales to fill the browser window. The code computes the viewport dimensions and positions the face’s center accordingly, drawing a yellow circle with a black stroke for the head and two smaller circles for eyes. Using React 16.9 and ReactDOM, it creates SVG elements with dynamic attributes, including a transform translation for centering and stroke-width styling. The mouth is defined in configuration but omitted from the final render, leaving only the head and eyes visible.

AAxel Pond
96% match
Loading thumbnail…

Fork of Smiley Face Part II

A React and SVG application renders a yellow smiley face that dynamically resizes to fill the browser window. The face is constructed from a large yellow circle with a black stroke, positioned at the viewport center, plus two smaller black circles for eyes. The code calculates all dimensions, including the face radius and eye offsets, from the window’s inner width and height. It uses React’s `ReactDOM.render` to mount the SVG, and the unmodified `index.js` relies on the React 16.9.0 UMD builds loaded via `unpkg`.

SSagar Saxena
96% match
Loading thumbnail…

Fork of Smiley Face Part II

A React and SVG application renders a yellow smiley face that dynamically resizes to fill the browser window. The face is constructed from a large yellow circle with a black stroke, positioned at the viewport center, plus two smaller black circles for eyes. The code calculates all dimensions, including the face radius and eye offsets, from the window’s inner width and height. It uses React’s `ReactDOM.render` to mount the SVG, and the unmodified `index.js` relies on the React 16.9.0 UMD builds loaded via `unpkg`.

SSagar Saxena
96% match
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face rendered with React and SVG scales to fill the browser window, with eyes and a mouth positioned relative to the viewport center. The code uses `window.innerWidth` and `window.innerHeight` to set the SVG dimensions, and React's `createElement` to build circle elements with `fill`, `stroke`, and `stroke-width` attributes. The face is drawn by translating a group to the center, then offsetting eye circles by fixed x and y distances. The implementation relies on ReactDOM's `render` method to mount the component into a div with id "root".

Mmofoluwasomi
96% match
Loading thumbnail…

Fork of Smiley Face Part II

A React application renders a full-window yellow smiley face using SVG. It positions the face and eyes relative to the window dimensions, computing center coordinates and offset values for the eye placement. The code uses React and ReactDOM to create the SVG circles, with a yellow face and black outline, but omits the mouth and eye colors from the markup. The rendering scales with the browser window size, filling the entire viewport.

SScott Kanning
96% match