Skip to main content
SimilarExport ZIP
100%

Fork of Smiley Face Part II

✓ Published0🌍 Public
OOlof Ollerstam
Last edited Oct 19, 2021
Created on Oct 19, 2021

A yellow smiley face is rendered as an SVG graphic, filling the entire browser window. The face scales with the viewport, centering itself and adjusting its radius based on the window’s height. The code uses React 16.9 to create SVG circle elements for the face, eyes, and mouth, with styling applied via SVG attributes. The rendering is dynamic, recalculating positions on load, and includes a video tutorial in the README.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

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 rendered as an SVG scales to fill the browser window, with its radius and position computed from the viewport dimensions. The face uses React’s declarative component structure, with eye and mouth offsets defined as constants and applied via SVG `<circle>` elements within a transformed group. The example leverages React 16.9 and ReactDOM to mount the component, while the static geometry updates responsively to the window size.

Hhhophan
95% match
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is rendered as a full-screen SVG, centered and scaled to the browser window. React defines the circle elements for the face, eyes, and mouth, with positions and radii calculated from the viewport dimensions. The code uses ReactDOM to mount the component into the DOM, and the SVG attributes are set dynamically based on window.innerWidth and window.innerHeight, demonstrating a responsive, component-driven approach to drawing.

Ssabine-selchow
95% match
Loading thumbnail…

Fork of Smiley Face Part II

This example renders a large yellow smiley face that fills the browser window, with two circular eyes and a mouth, all drawn as SVG elements. The face is centered on the screen and scales its radius based on the viewport height, leaving a black stroke around the outer circle. The code uses React (via ReactDOM.render) to define the SVG structure and dynamic dimensions, reading window.innerWidth and window.innerHeight to set the coordinate system. Static variables control the eye offset, eye radius, and stroke width, but no mouth is implemented, and the page includes an embedded YouTube video in its README.

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

Fork of Smiley Face Part II

A yellow smiley face fills the browser window, drawn with SVG circles for the head, eyes, and mouth, all centered dynamically based on the viewport's dimensions. The face uses a black stroke for the outline and eye sockets. The visualization is built with React and ReactDOM, rendering the SVG markup directly from JavaScript constants that define the face's proportions. The code includes a commented-out static version and dynamically calculates positions with `window.innerWidth` and `window.innerHeight` for a responsive layout.

SSong Tao Chen
95% 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
95% 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
95% match