Skip to main content
SimilarExport ZIP
100%

Fork of Smiley Face Part II

✓ Published0🌍 Public
SSan
Last edited Apr 15, 2023
Created on Apr 15, 2023

A smiling face made of yellow circles fills the browser window, but its eyes follow the pointer in real time. The React app tracks mouse coordinates via the `onMouseMove` event, updating the eye positions through `useState` and `useCallback`. The SVG is rendered with ReactDOM, using hardcoded dimensions from `window.innerWidth` and `window.innerHeight`. The face’s static features—head, stroke, and mouth—are defined as SVG circles, while the dynamic eyes are the only responsive elements.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face is drawn as a yellow SVG circle with black facial features, but its eyes are replaced by two small circles that follow the viewer's cursor. The React application tracks mouse movement using the `onMouseMove` event handler and updates the eye positions via the `useState` and `useCallback` hooks. The visualization is rendered with React DOM into an SVG container, using the React library version 16.9.0. The interactive behavior directly responds to pointer coordinates, creating a playful, face-tracking effect.

Aantanta28
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
94% match
Loading thumbnail…

Fork of Smiley Face Part II

A smiling face rendered as a yellow SVG circle with black outline, black eyes, and a gap for a mouth, centered in the browser window. The face uses React’s `useState` hook to track the mouse position, updating on every `mousemove` event, though no visual change tied to that position is implemented. The SVG dimensions and face element positions derive dynamically from `window.innerWidth` and `window.innerHeight`, with React rendering the final markup via `ReactDOM.render`. The example demonstrates a static geometric illustration with event-handling logic in place.

VVenkat
94% match
Loading thumbnail…

Fork of Smiley Face Part II

A React-based smiley face fills the browser window, centered dynamically with adjustable eye and mouth geometry. It renders a yellow circle with black stroke, two black eyes, and a mouth as SVG circles, using React’s declarative JSX syntax to compute positions relative to viewport dimensions. The code imports React and ReactDOM, defines constants for spacing and radii, and mounts the component to the root div. The face responds to window size since all coordinates derive from `window.innerWidth` and `window.innerHeight`.

Ddatnguyen219
94% match
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is drawn as a static SVG circle with two black eye circles and a wide mouth, all specified within commented-out markup in the HTML. The React application renders an interactive SVG where a single circle tracks the mouse position, updating its center coordinates via React state and event handling. The code uses React 16.9.0, ReactDOM, and the `useState` and `useCallback` hooks to manage mouse movement events, with the SVG dimensions set to 960 by 500 pixels.

Mmaker57sk
94% match
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face (a circle with two eyes) fills the browser window, centered and scaled to the viewport dimensions. The visualization is built with React and rendered as an SVG, using ReactDOM to mount the component. The face’s size, eye positions, and stroke width are defined by JavaScript constants derived from `window.innerWidth` and `window.innerHeight`, with the face radius matching the viewport height minus half the stroke width. The code leverages React 16.9 and ReactDOM, with explicit SVG circle elements for the face and eyes, all grouped and translated to the screen’s center.

FFewwy
94% match
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face fills the browser window, centered via SVG circles and positioned with a transform on a group element. React calculates the face’s dimensions from `window.innerWidth` and `window.innerHeight`, rendering two fixed eye circles and a yellow head with a black stroke. The code uses React 16.9.0 and ReactDOM to mount the SVG to a root div, with no mouth or interactive behavior beyond the static visual.

JJerry Fan
94% match
Loading thumbnail…

Fork of Smiley Face Part II

A smiling face fills the browser window, rendered as a yellow circle with black outline, two black eyes, and no mouth, centered dynamically using the window dimensions. The React application uses ReactDOM to mount an SVG element, with window.innerWidth and innerHeight defining the canvas size. Circles are positioned via SVG attributes, including cx, cy, r, and stroke-width, with a group transform translating coordinates to the screen center.

RRobert Nakano
93% match