Skip to main content
SimilarExport ZIP
100%

Smiley Face Part II

✓ Published0🌍 Public
Rrodrigoemarquez
Last edited Jan 13, 2022
Created on Jan 12, 2022
Forked from HTML Starter

A yellow smiley face is drawn as a circle with two eyes, centered within a square SVG viewport. The face uses React components to render three SVG circle elements, with the main face outlined in black and the eyes filled with the default black color. The code imports React and ReactDOM, mounts the component to a root div, and relies on React’s production build from a CDN. Eye positions are calculated using offsets from the center, and the face radius is derived from the viewport height.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part II

A yellow smiley face rendered as SVG appears centered on a white background, with two black eyes positioned symmetrically around the vertical center. Built with React and ReactDOM, the face is constructed from three circle elements: a large yellow outer circle with a black stroke for the head, and two smaller black circles for the eyes. The SVG viewport measures 960 by 500 pixels, with all positions and radii calculated from fixed constants. The code uses JSX within a functional component to declaratively define the visualization.

WWolfgang
95% match
Loading thumbnail…

Smiley Face Part II

A smiling face rendered as a yellow SVG circle with black outline and two black eyes, positioned symmetrically around the center of a 960×500 canvas. The example uses React to define and render the SVG elements, with ReactDOM mounting the component into the page. Hard-coded constants specify the circle radii, eye offsets, and stroke width, with no interactive or animated behavior. The smile itself is absent, showing only the face and eyes at this stage.

Rrsulli4
95% match
Loading thumbnail…

Smiley Face Part II

A smiling face is rendered as a yellow circle with two black eyes, centered in the browser window and scaled to the viewport dimensions. Using React and ReactDOM, the SVG is constructed declaratively with circle elements whose positions and sizes are calculated from the window width and height. The code defines constants for eye offset, eye radius, and mouth width, though it only renders the face and eyes, omitting an explicit mouth shape.

Mmanasishrotri
95% match
Loading thumbnail…

Smiley Face Part II

This example shows a yellow smiley face rendered as an SVG, with two black eyes and a black outline, centered and scaled to fill the browser window. The face is constructed using React and ReactDOM, with circles positioned via SVG group transformations. It uses the `react` and `react-dom` production libraries, and the `window.innerWidth` and `window.innerHeight` properties to set the canvas dimensions. Eye and mouth offsets are defined as constants, and the face is drawn using SVG `<circle>` elements with `fill`, `stroke`, and `stroke-width` attributes.

Aassafali
94% match
Loading thumbnail…

Smiley Face Part II

A yellow smiley face rendered as an SVG using React and ReactDOM. The code draws three circles: a large outlined face and two smaller eyes, with dimensions computed from the viewport width and height. React 17’s `ReactDOM.render` mounts the component to a root element, while inline JSX defines the SVG attributes like `cx`, `cy`, `r`, and `stroke-width`. The face lacks a mouth, making it a partial construction.

EElvira Nassirova
94% match
Loading thumbnail…

Smiley Face Part II

This example shows a yellow smiley face drawn with three circles on an SVG canvas: two black eyes and a larger yellow face outlined in black. Built with React and rendered to SVG, the app defines a single functional component that returns the circle elements. ReactDOM renders the component into the page’s root div, with React and ReactDOM loaded via CDN scripts. The SVG canvas is 960 by 500 pixels, and the face is centered at coordinates (480, 250) with a radius of 245.

HHenrique Peixoto
94% match
Loading thumbnail…

Smiley Face Part I

A yellow smiley face is rendered as three SVG circles inside a 960 by 500 viewport, with two black eyes positioned symmetrically around the center. The code uses React and ReactDOM to declaratively create the SVG elements, setting circle radii and offsets through variables like `centerX`, `centerY`, `eyeOffsetX`, `eyeOffsetY`, and `strokeWidth`. The face is drawn with a yellow fill and a black stroke, while the eyes are plain black circles.

CChezka Siño
94% match
Loading thumbnail…

Smiley Face Part II

A smiling face rendered as a yellow SVG circle with two eyes, centered on a black background. The visualization adjusts to the browser window size using React and ReactDOM, computing dimensions from `window.innerWidth` and `window.innerHeight`. The face is drawn with three `<circle>` elements inside an SVG, using React JavaScript for structure and styling via attribute props like `fill`, `stroke`, and `stroke-width`. The code derives the face radius from the viewport height, and the eyes are positioned with fixed offsets from the center.

PPichayut Liamthong
94% match