Skip to main content
SimilarExport ZIP
100%

Monster Eye

✓ Published0🌍 Public
KKrishanu Nayak
Last edited Mar 8, 2022
Created on Mar 7, 2022
Forked from D3 Starter

A large gray eye follows the mouse cursor with its iris and pupil, which shift position, rotate, and shrink as the pointer moves toward the screen's edges. The ellipse-shaped iris and pupil scale down while rotating based on the cursor's distance and angle from the center. Built with D3 v7, the visualization uses `d3.scaleLinear` for positional and radial scaling, and `transition().attr()` to animate the SVG ellipse attributes (`cx`, `cy`, `rx`, `ry`, `transform`) in response to `mousemove` events. The eye's outline is a static circle.

AI-generated description

A humble attempt to create my first D3 viz.

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follwer 1

A single gray circle follows the mouse cursor across the full screen, responding instantly to every movement. The visualization uses D3 v7's selection and event handling, attaching a `mousemove` listener to the SVG element. On each event, the code updates the circle's `cx` and `cy` attributes with the cursor's coordinates, logging the position to the console. The SVG fills the entire browser window via `window.innerWidth` and `window.innerHeight`, with the body reset to no margin and hidden overflow.

RRichard Hu
72% match
Loading thumbnail…

Mouse follower

A single eye shape rendered as an SVG circle tracks mouse movement across a 960-by-500 canvas. The example demonstrates mouse-event handling in a React component, logging each move to the console while the circle itself remains fixed at the center. Built with React 16.9 and d3.v7, it uses the `onMouseMove` React event handler and d3’s `arc` import, though the arc function is not applied to the visible circle. The page hides scrollbars via CSS `overflow:hidden`, and the mouse-follower interaction is minimal, showing only the event trigger without updating the circle’s position.

HHaris Vidimlic
72% match
Loading thumbnail…

Fork of Mouse Follower

A green ellipse trails the mouse cursor with a bouncy, animated movement. The visualization uses a unidirectional data flow where mouse events update a central state object, which then triggers a re-render of the visualization. Built with D3 v7, the code uses `select` to manage SVG elements and a `.transition()` with a 500ms duration and `d3.easeBounce` easing function to animate the ellipse's position. The SVG canvas resizes to match the full browser window dimensions.

Sstchiang
72% match
Loading thumbnail…

Animated eye

The animated eye is a playful React visualization that renders a stylized, rotating eye shape on a dark background, with a central pupil and iris built from nested CSS circles. Hovering over the eye triggers a smooth eyelid closure, simulated by a red overlay that expands vertically. The code uses React 16.13.1 and ReactDOM to mount the component, while all animation and geometry are handled entirely through CSS3 properties, including transforms, border-radius, and transitions on the `.shut span` element. The rendering approach is purely DOM-based with no external data or JavaScript animation libraries.

RRajat Dangat
71% match
Loading thumbnail…

Mouse Follower

A glowing circle follows the mouse cursor across a full-screen SVG canvas. The visualization uses React’s `useState` and `useCallback` to track the pointer’s `clientX` and `clientY` coordinates, updating the circle’s `cx` and `cy` attributes in real time. The rendering is done via ReactDOM, with the SVG element’s `onMouseMove` event triggering state updates, while D3.js is loaded but not directly utilized in the interaction logic.

SSapna Nagwanshi
71% match
Loading thumbnail…

Moving Mouse

A single red circle follows the mouse cursor across a full-screen SVG canvas, updating its position in real time with each mousemove event. Clicking anywhere randomly changes the circle's fill color by generating new RGB values. The visualization uses D3 v7's `select`, `join`, and event handling to bind the circle to the pointer coordinates, with state managed through a custom `setState` function that triggers re-renders. The SVG dimensions are set to match `window.innerWidth` and `window.innerHeight`, and the cursor is hidden via CSS.

SSubhendu Karmakar
71% match
Loading thumbnail…

Mouse Follower

A large blue circle follows the mouse cursor as it moves over an SVG canvas. The visualization uses React's `useState` and `useCallback` hooks to track the pointer's `clientX` and `clientY` coordinates, updating the circle's `cx` and `cy` attributes on every mouse move. The circle is rendered as a literal SVG `<circle>` element with a fixed radius of 30 pixels, centered initially at the middle of a 960×500 viewport.

RRichardPearce60
71% match
Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor as it moves across a 960 by 500 SVG canvas. Built with React and D3, the component uses React’s `useState` hook to track pointer coordinates via an `onMouseMove` event handler. The circle is rendered through a reusable `BackgroundCircle` component, while separate `Eyes` and `Mouth` components, using D3’s `arc` generator, show how to structure complex SVG shapes across modular ES6 files. The visual demonstrates real-time state updates in a React-D3 integration.

GGeorge Williams
71% match