Skip to main content
SimilarExport ZIP
100%

Smiley face

✓ Published0🌍 Public
Ssuddhasheel
Last edited May 25, 2022
Created on May 24, 2022
Forked from HTML Starter

A smiley face is rendered as an SVG graphic within a React application. The face consists of a large yellow circle with a black outline, representing the head, and two smaller black circles for the eyes. The visualization is created using React and ReactDOM, with the SVG elements defined declaratively in JavaScript. The head's size and position are calculated relative to the canvas dimensions, and the eye positions are offset from the center. The code renders the graphic directly into the page's root element using `ReactDOM.render`.

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

A React application renders a simplified smiley face as a static SVG graphic. The face consists of a yellow circle with a black border, positioned at the center of a 960×500 viewport, and two smaller black circles representing eyes. Coordinates for the face and eyes are computed from width, height, and offset constants rather than loaded data. React 17 uses `ReactDOM.render` to mount the SVG elements defined in JSX, with styling applied directly through SVG presentation attributes.

Hhappylilem
95% match
Loading thumbnail…

smiley

A simple SVG smiley face is drawn using React components, where a yellow circle with a black stroke forms the head and two filled circles represent the eyes, positioned symmetrically around the center. The face is centered dynamically based on the window dimensions, with its size scaling relative to the viewport height. The implementation uses React 16.9 and ReactDOM to render the SVG elements directly in the browser, computing all positions and radii from the window's width and height rather than using fixed coordinates.

Mmanjushayarreddu
93% match
Loading thumbnail…

Smiley Face

This example uses React and SVG to render a static smiley face. The face is drawn with three SVG circle elements on a 960x500 canvas: a yellow outer circle for the head and two black circles for the eyes, all with visible black strokes. The React component renders only a heading, while the SVG markup is placed directly in the HTML body, so the visualization is not generated through React itself. The code relies on the React and ReactDOM production libraries and a bundled JavaScript file, though no interactive behavior is implemented.

RRidhuparan
93% match
Loading thumbnail…

Smiley Face

A smiling face rendered as a static SVG graphic uses React 17 and ReactDOM to mount an app, though the visible face is drawn directly in the index.html file with hardcoded circle elements. The yellow outer circle, two black eye circles, and implied curved mouth are laid out with explicit pixel coordinates on a 960×500 canvas. The code does not implement any interaction or data-driven logic; it simply outputs a fixed, pre-defined facial composition.

JJasprado23
93% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline and two black inner circles forms a simple smiley face. The face is drawn entirely with SVG circle elements, centered within a 960 by 500 viewport, using React's JSX syntax to render the markup. The code sets explicit pixel values for the face radius, eye offset, and eye radius, and relies on ReactDOM to mount the SVG into the page.

MMaulana Adam Sahid
93% match
Loading thumbnail…

Smiley Face

A yellow smiley face rendered as a React SVG component scales to fill the browser window. The code defines circle elements for the head, eyes, and mouth using fixed offsets and radii, with the face centered via a transform. ReactDOM renders the SVG tree to the page, using hard-coded numeric values instead of external data. The example demonstrates declarative SVG composition within React’s rendering pipeline.

OOleJRask
93% match
Loading thumbnail…

Smiley face 1

A classic smiley face drawn with React and SVG. The face consists of a large yellow circle for the head, outlined in black, with two smaller solid black circles positioned symmetrically for the eyes. The code uses React’s `ReactDOM.render` to mount the SVG into the DOM, with dimensions and positions defined by constants. The rendering relies on standard SVG circle elements, with stroke width and radius set through React JSX props.

Aarimakhalil
93% match
Loading thumbnail…

Smiley

This example renders a simple smiley face using React and SVG. The visualization draws three circles: a large yellow head with a black stroke, and two smaller black circles positioned as eyes. The code leverages the React and ReactDOM libraries to mount the SVG graphic into an HTML page, with the circle elements defined using SVG properties for fill, stroke, position, and radius. No data is loaded or processed; the graphic is purely static.

SShreyansh shrey
93% match