Smiley Stamp

100%

✓ Published0🌍 Public

Last edited Oct 1, 2020

Created on Oct 1, 2020

A red crosshair target follows the mouse cursor across a blank SVG canvas. Clicking the mouse stamps a yellow smiley face with black eyes and a curved mouth at that location. The application uses React with the `useState` and `useCallback` hooks to track mouse movement and click events, dynamically rendering `Target` and `Smile` components. The target and smiley shapes are composed of SVG circles and lines, with the smiley’s eye offset and stroke width passed as props.

AI-generated description

A program that follows your mouse with crosshairs, then stamps a smiley on the screen wherever you click. Adapted from Professor Kelleher's original smile and mouse follower.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face 1

A yellow circle follows the mouse cursor across an SVG canvas, acting as a simple interactive smiley face without facial features. The React component tracks pointer movement via the `onMouseMove` event and updates the circle’s center coordinates using the `useState` hook. The visualization uses React 17 and renders directly to SVG, with the circle’s position tied to the browser’s clientX and clientY values. No external data is loaded; the graphic responds purely to user input in real time.

VVishnu Jayan

85% match

Loading thumbnail…

Smiley Face Part II

A yellow smiley face follows the mouse cursor across a full-screen SVG canvas. As the pointer moves, the face's position updates in real time through React state and event handling. The implementation uses React 16.9 with the `useState` and `useCallback` hooks within an SVG `circle` element, responding to `onMouseMove` events to set the circle's `cx` and `cy` coordinates.

BBrian Musisi

85% match

Loading thumbnail…

Mouse Follower

A smiley face follows the mouse cursor across a full-screen SVG canvas. The application tracks the pointer's position and renders a yellow circle with facial features at that location, creating a playful interactive effect. Built with React and ReactDOM, the example uses the `onMouseMove` event handler and `useState` to update the circle's `cx` and `cy` coordinates dynamically. The SVG viewport matches the browser window dimensions, and the smiley face’s position updates instantly as the user moves the mouse.

FFábio Correia

83% match

Loading thumbnail…

Smiley Face

A simple smiley face rendered as a yellow circle with black outline and two eye circles, all defined by named constants for dimensions and positions. The React application computes the center, stroke, and eye offsets to place the shapes within an SVG canvas. It uses React 18.2.0 for component creation and ReactDOM 18.2.0 to render the SVG output to the page root, with no face animation or interactive features included.

JjMarkillie

83% match

Loading thumbnail…

Smiley Face Part I

A yellow circle with a black outline and a black arc smile follows the mouse cursor across an SVG canvas. Built with React and D3 v7, the smile is generated using the `arc()` generator from D3, while React's `useState` and `useCallback` hook react to `onMouseMove` events. The circle renders as an SVG element at the cursor's current position.

Ddrc6587

83% match

Loading thumbnail…

Smiley experiment

This example shows a static smiley face composed of a yellow circle with two black eyes and a curved line for a mouth, rendered as SVG in a React component. The face’s features are positioned using absolute coordinates relative to the SVG canvas center. The code uses React’s `useState` and `ReactDOM` for mounting, while the `BackgroundCircle` component handles the base circle. Although a mouse-move handler is defined, it only logs coordinates to the console and does not alter the visualization.

Uusmcmikestu

83% match

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face with black-outlined eyes and a wide circular head is rendered on a 960 by 500 SVG canvas. Underneath the static face, an interactive circle tracks the mouse pointer position, moving in real-time as the user moves over the canvas. The application uses React and ReactDOM, with the `useState` hook managing the mouse coordinates and an `onMouseMove` event handler updating the circle's center via SVG attributes. The smiley face itself is drawn using raw SVG circle elements, while the interactive element is generated programmatically through React's declarative rendering.

Ssimontoblad

83% match

Loading thumbnail…

Smiley face

This example draws a simple smiley face using SVG shapes. It shows a large yellow circle for the head, two smaller unfilled circles for eyes, and relies on the stroke and fill attributes from the React-created SVG markup. The code uses React 17 via the UMD production build to render the SVG directly in the HTML, with inline properties for positioning and styling. The face is centered on a 960×500 canvas, and the mouth is implied by the head’s bottom edge rather than drawn explicitly.

Rrikaami13

83% match