Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
Pparshwa30122002@gmail.com
Last edited Aug 13, 2024
Created on Aug 13, 2024
Forked from Hello HTML

This interactive React application draws a full-screen smiley face using SVG. The visualization is built with React and ReactDOM, rendering geometric shapes onto a canvas that automatically resizes to the browser window. It constructs the face with yellow circles for the head, black circles for the eyes, and a quadratic Bézier curve for the smile. The code uses absolute window dimensions and applies a Gaussian blur filter to create soft highlights on the irises.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

This visualization draws a simple smiley face using two filled circles for the eyes and a larger yellow circle for the head, outlined in black. The React app renders the shape through an SVG element, with dimensions and positions defined by constant variables for the center, eye offset, and radius. The code relies on React and ReactDOM to render the SVG directly in the browser.

Ddorali.mohamad@gmail.com
92% match
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
91% 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
90% 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
90% match
Loading thumbnail…

Smiley Face Part II

This is a React application that renders a full-screen SVG smiley face, positioned at the center of the browser window. The face consists of a yellow circle with a black outline, two black eye circles, and an implied mouth area, all drawn using SVG `circle` elements. The code leverages the React and ReactDOM libraries, using a functional component and the `ReactDOM.render` method to mount the visualization. The circle positions and sizes are computed programmatically from `window.innerWidth` and `window.innerHeight`, with the face's radius and features scaling relative to the viewport's height.

Ffaliblemanica@gmail.com
90% match
Loading thumbnail…

Smiley Face

This example displays a static smiley face rendered as a yellow circle with two oval eyes, each containing a black pupil, and a curved mouth implied by the SVG shapes. Constructed with React 17 and plain SVG elements, the visualization uses hard-coded circle coordinates for the face and eyes, with yellow fill, black strokes, and thick stroke widths. The SVG canvas is set to 960 by 500 pixels, and the drawing is embedded directly in HTML without any interactive behavior or data-driven updates.

Rreshali35
90% match
Loading thumbnail…

Smiley Face

A simple smiley face rendered with React and SVG. Three circles create the face and eyes on a 960 by 500 canvas, with the main face filled in yellow and outlined with a thick black stroke. The code uses React 18.2.0 and ReactDOM to render a separate "Hello" heading, while the face itself is drawn as raw SVG markup within the HTML body. The SVG is generated from static coordinates, showing a basic composition of graphical primitives without interactive behavior.

RRamakrishna Katragadda
89% 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
89% match