Point and Shoot

100%

Point and Shoot

✓ Published1🌍 Public

Last edited Oct 1, 2020

Created on Sep 12, 2020

A red target circle and crosshairs follow the mouse cursor across an SVG canvas, tracking movement through React's `useState` and `useCallback` hooks. The example uses React 16.9 and ReactDOM to render the `Target` component, which draws the circle and two perpendicular lines with configurable stroke widths and ratio. The code includes an empty `onClick` handler that logs the event, preparing to record shot holes in the `holes` state array, though no drawing occurs on click yet.

AI-generated description

A program that follows your mouse with a circle. Forked and unchanged (other than this readme) from Professor Kelleher's profile.

Working towards turning the circle into a target, then drawing something upon mouse click.

MIT Licensed

Similar vizzes

Loading thumbnail…

point

A single yellow circle follows the mouse cursor within an SVG canvas, serving as a simple interactive point visualization. The React application tracks mouse movement via an onMouseMove handler, updating the circle's cx and cy coordinates through React's useState hook. Using a production build of React 16.9.0, the code renders a 600x300 SVG element and directly manages state updates on every cursor position change, with no additional D3 functions beyond the imported arc utility.

Rredeath96

77% match

Loading thumbnail…

Pointer

A red circle follows the mouse cursor across an SVG canvas, with its position updating in real time via React state. The `App` component listens for `onMouseMove` events on the SVG element, using `useState` to store the pointer coordinates and `useCallback` to handle the event efficiently. The circle is rendered with `cx` and `cy` attributes derived from the cursor's `clientX` and `clientY` values, creating a direct, responsive interaction between the pointer and the visual element.

VVamsi Bhargav Sukamanchi

77% match

Loading thumbnail…

Mouse Follower Cross hair

A circle and two crosshair lines track the mouse cursor in real time over a fixed-width SVG canvas. The React application captures pointer movement through an `onMouseMove` event handler, updating state that repositions the red dot and the intersecting vertical and horizontal lines. React's `useState` and `useCallback` hooks manage the coordinate updates, while ReactDOM renders the SVG elements directly in the browser.

Sshaji K

76% match

Loading thumbnail…

Point Marks

A single unfilled black circle follows the mouse cursor within an SVG viewport. The React application updates the circle's center coordinates through the `onMouseMove` event handler, using the `useState` hook to track mouse position and the `useCallback` hook to optimize event handling. ReactDOM renders the SVG element, and the circle's position is bound directly to the current mouse coordinates.

Jjjlaber

75% match

Loading thumbnail…

Mouse Tracking

A single circle tracks the mouse cursor in real time across a full-screen SVG canvas. Built with React 18, the app uses the `useState` hook to store cursor coordinates from the `onMouseMove` event on a div catcher, then passes those coordinates to an SVG circle’s `cx` and `cy` attributes for immediate repositioning. The `useCallback` hook memoizes the event handler for efficiency. ReactDOM renders the component into the page’s root element.

GGabriel

75% match

Loading thumbnail…

Interaction With React, mouse follower

A red circle follows the cursor inside an SVG canvas in this React-based interactive visualization. The example demonstrates a mouse-follower interaction using React's `useState` hook to track pointer coordinates and update the circle's `cx` and `cy` attributes in real time. The `App` component renders an SVG element with an `onMouseMove` event handler, which calls `setMousePosition` on each pointer movement. The circle’s position is bound to the stored mouse coordinates, creating a direct visual response. The code uses React 16.9.0, ReactDOM, and the SVG `circle` element, with the canvas sized at 960 by 500 pixels.

IIceC0ld

75% match

Loading thumbnail…

Interaction With React

A React application demonstrates mouse interaction by rendering a single circle that follows the cursor across an SVG canvas. The code uses React’s `useState` and `useCallback` hooks to track the pointer position and update the circle’s `cx` and `cy` attributes on every `mousemove` event. The circle is drawn with SVG elements, and ReactDOM renders the component into the `#root` div. No external data is loaded; the visualization simply shows real-time positional state changes.

RRiccardo De Lucia

75% match

Loading thumbnail…

React Draw with Mouse

A React component renders an SVG circle that follows the mouse pointer across a 960×500 canvas. The SVG’s `onMouseMove` event updates React state via `useState`, and `useCallback` memoizes the handler to prevent unnecessary re-renders. The circle’s `cx` and `cy` coordinates are bound to the current mouse position, demonstrating a reactive, declarative drawing interaction. Unlike D3, this example relies solely on React’s state management and SVG’s native event handling to create a live, mouse-driven visualization.

Eekorre1001

75% match