Fork of Smiley Face Part II

100%

Fork of Smiley Face Part II

✓ Published0🌍 Public

Last edited Sep 24, 2025

Created on Sep 24, 2025

This fork of "Smiley Face Part II" renders a yellow smiley face that scales to fill the browser window. It uses React and ReactDOM to create an SVG graphic, with the face centered and sized based on the window’s inner width and height. The code draws the head as a circle with a black stroke, plus two eye circles, and omits the mouth shown in the original commented-out SVG markup. The rendering relies on SVG elements and the `window.innerWidth` and `window.innerHeight` properties.

AI-generated description

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

96% match

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face that scales to fill the browser window. The face is drawn with a circular head, two eyes, and no mouth, using React and ReactDOM to create an SVG element with proportional dimensions. The code calculates the window size, centers the graphic, and applies a translation transform to position the facial features relative to that center. It uses hard-coded offsets and radii for the eyes and face, with the head’s radius based on half the window height minus the stroke width.

Ggrace.chaeyeong.kim@gmail.com

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 yellow smiley face fills the browser window, with two black eyes and a yellow face centered on a black outline. The face is rendered as an SVG graphic using React components, with circle elements for the face and eyes placed relative to the window’s center. The code uses React and ReactDOM to render the SVG into the DOM, calculating dimensions from `window.innerWidth` and `window.innerHeight` and applying a transform to position the group at the center. The implementation is a fork of a previous example, adding stroke styling and responsive sizing.

Ssunyixia025@gmail.com

96% match

Loading thumbnail…

Fork of Smiley Face Part II

Ssunyixia025@gmail.com

96% match

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face that fills the browser window using React and SVG. The face is centered by translating to the window’s midpoint, with the head as a circle whose radius scales to the viewport height. Eyes are placed using fixed horizontal and vertical offsets, and the mouth is omitted despite being referenced in a commented-out SVG block. The code relies on React 16.9’s `ReactDOM.render` to mount the component into the `#root` element, with all dimensions computed from `window.innerWidth` and `window.innerHeight`.

Sseitzfab

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

95% match

Loading thumbnail…

Fork of Smiley Face Part II

A fork of the Smiley Face Part II example renders a yellow smiley face using React and SVG. The face is dynamically sized to fill the browser window, with its radius calculated from the viewport height. The application uses React and ReactDOM to render SVG elements, including circles for the face, eyes, and mouth, positioned relative to the center of the screen. The code defines constants for eye offset, eye radius, and mouth parameters, all drawn with black strokes on a yellow fill.

Bbdm-us

95% match