Circle animation

100%

Circle animation

✓ Published1🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

This example shows a yellow circle with a black outline that follows the user’s cursor across an SVG canvas. The circle is rendered inside a React component tree, with its position updated via React state and mouse event handlers. It uses React hooks like `useState` and `useCallback`, while the circle’s shape is defined as a simple SVG `<circle>` element. The code splits components into separate ES6 modules for the background, eyes, and mouth, though only the background circle is currently visible in the interaction.

AI-generated description

Splitting React components into multiple files using ES6 modules. Bonus: React Fragments!

MIT Licensed

Similar vizzes

Loading thumbnail…

Circle movement

A yellow circle with a black outline follows the mouse cursor across an SVG canvas. The circle's position is updated in real time using React state and a mouse move event handler. The visualization uses React's `useState` and `useCallback` hooks alongside D3's `range` utility, with an SVG `<circle>` rendered directly. The code includes reusable components for a face, but the active example only displays the moving circle.

Lltostes

89% match

Loading thumbnail…

Circle following cursor

A yellow circle follows the cursor's movement across an SVG canvas. The circle's position updates in real-time based on mouse coordinates captured by React's `onMouseMove` event handler. The application uses React state management through `useState` and `useCallback` to track the cursor position, while D3's `arc` function is imported but not directly utilized in the visible code. The rendering is handled entirely through React's declarative SVG elements.

AAndrea Picciau

85% match

Loading thumbnail…

circle movment

A single dark circle follows the mouse cursor across an SVG viewport, creating a direct and immediate interactive connection between user input and visual output. Built with React hooks for state management and event handling, the circle’s position updates on every mousemove event, while D3’s `arc` generator defines a static mouth shape visible in the initial markup. The visualization renders exclusively through SVG elements, with React managing the circle’s coordinates and D3 providing geometry utilities. This minimal example demonstrates the seamless integration of React’s declarative rendering with D3’s computational functions for interactive graphics.

Sshimos12468

85% match

Loading thumbnail…

Interaction with React

This example shows a single yellow circle that follows the mouse cursor across a 960-by-500 SVG canvas. Built with React 16.9 and D3 v5, the app uses the `useState` and `useCallback` hooks to track the cursor’s `clientX` and `clientY` coordinates, updating the circle’s `cx` and `cy` attributes on every `mousemove` event. The D3 `arc` import is included but unused in the visible code.

EEd Hutchinson

84% match

Loading thumbnail…

Follow me circle

A yellow circle follows the cursor across an SVG canvas, responding to every mouse movement in real time. The React component tracks the pointer's coordinates via a `useState` hook and updates the circle's `cx` and `cy` attributes on each `onMouseMove` event. Using React 16.9 and ReactDOM, the `useCallback` hook optimizes the event handler, while the SVG rendering keeps the interaction smooth and lightweight.

AAlex Zadel

84% match

Loading thumbnail…

Circle follow the Mouse React and SVG.

A yellow circle follows the mouse cursor across a full-window React SVG canvas. The circle’s position updates continuously via React’s `useState` and `useCallback` hooks, triggered by the SVG’s `onMouseMove` event. The code uses `window.innerWidth` and `window.innerHeight` to size the canvas, and ReactDOM renders the interactive component. This demonstrates real-time state-driven rendering with React and SVG.

Bbassra

84% match

Loading thumbnail…

circle following cursor

A yellow circle with a black outline follows the cursor across a blank SVG canvas. The circle’s position is updated on mouse movement using React state and the `onMouseMove` event handler. The visualization is built with React 17 and D3 v7, rendering SVG elements directly. The code uses `useState` and `useCallback` to track and set cursor coordinates, demonstrating interactive data-driven updates without any external dataset.

MMalcolm Mead

84% match

Loading thumbnail…

Moving circle with mouse cursor

A yellow circle follows the cursor across a 960x500 SVG canvas. The application tracks the mouse pointer's client coordinates and re-renders the circle's center position on every move event. Built with React 16.9 and D3 v5, it uses React's `useState` hook to manage the dynamic mouse position state, while SVG elements handle the visual rendering within a fullscreen, overflow-hidden layout.

DDhvanil Vaghasiya

84% match