Fork of Golden Compass with Mouse Following

100%

Fork of Golden Compass with Mouse Following

✓ Published1🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

This visualization displays an ornate golden compass dial composed of layered geometric facets, gradients, and a central rotating needle set. The compass needle continuously pivots to follow the cursor's position within the browser window, while the page hides the default cursor. The code renders the dial using raw SVG elements—including polygons, circles, and a radial gradient—and animates the needle by updating its transform attribute in response to mouse movement. It uses a drop-shadow filter for depth and a mask to create the dial's inner ring effect.

AI-generated description

Just a few modification from the original:

https://vizhub.com/CoraWoolsey/67ece47a220244f7a135b09534bceccc

Centering
Mouse following

MIT Licensed

Similar vizzes

Loading thumbnail…

Curran's Golden Compass with Mouse Following

A golden compass with eight jewel-like facets and a central dial responds to the mouse, which it replaces with a custom pointer (the cursor is hidden). The compass’s north and south needles rotate toward the cursor’s position, tracking its movement in real time. Built as a static SVG scene with CSS for layout and cursor control, it uses SVG gradients, masks, drop shadows, and polygon geometry to model the compass’s metallic surfaces and shading. No external libraries are required; the implementation relies solely on native SVG elements and inline JavaScript for mouse-following animation, with all visual components defined directly in the markup.

CCora

89% match

Loading thumbnail…

Golden Compass

This piece is a static, geometric SVG illustration of a stylized golden compass. Rendered entirely with a single HTML file, it showcases how layered `<polygon>` and `<circle>` elements, combined with `<radialGradient>` and `<linearGradient>` fills, create a faceted, jewel-like dial. The code uses SVG `<mask>` and `<filter>` definitions to generate an intricate internal cutout and a drop shadow for the compass needles, which are drawn with curved paths. The composition is purely decorative, with no interactive or data-driven elements.

CCora

81% match

Loading thumbnail…

Fork of Mouse Follower Simple Make Something Francesca Sajedi

A green circle and red rectangle respond to the mouse. As the cursor moves, the circle repositions to the cursor's coordinates while the rectangle's width and height scale to match those same x and y values. The visualization uses the D3.js select and append methods to create SVG elements, binding a mousemove event to update the shape attributes dynamically. The SVG canvas fills the entire browser window.

Ffsajedi22

71% match

Loading thumbnail…

Fork of Mouse Follower

This interactive visualization displays a yellow circle that follows the mouse cursor across an SVG canvas. Built with React, it uses the `useState` hook to track mouse coordinates and `useCallback` to optimize the event handler. The `onMouseMove` event on the SVG element updates the circle’s `cx` and `cy` attributes, while the circle’s radius remains fixed at 30 pixels. The code initializes the circle at the canvas center and renders everything through ReactDOM.

Hhukbk

71% match

Loading thumbnail…

Fork of Fork of Mouse Follower edited2

A blue rectangle and a text label reading "Follow Mouse" both track the cursor across an SVG canvas that fills the viewport. The page listens to mouse movement events and updates the x and y coordinates of both elements in real time. Built with D3 v7, the example uses selection methods like `append`, `attr`, and `on` to create and move the shapes. The SVG is sized to the browser window, and CSS hides page margins to maximize the tracking area.

KKhatera Alizada

71% match

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The visualization uses React with the `useState` hook to track mouse coordinates and rerender the circle’s `cx` and `cy` attributes. The app is built with React and ReactDOM, rendered into a full-screen SVG, with styling that hides page margins and scrollbars. The mouse movement is captured via an `onMouseMove` event handler on the SVG element.

NNick Hu

71% match

Loading thumbnail…

Fork of Mouse Follower Simple - Alvegorova

A white circle follows the mouse cursor across a solid blue-gray background. The example uses D3 v7 to select the `#app` container, append an SVG canvas sized to the browser window, and create a single circle element. A `mousemove` event listener updates the circle’s `cx` and `cy` attributes with the event coordinates, providing direct, real-time feedback. The visualization is rendered entirely through SVG, with styling applied via an external CSS file.

AAlena Egorova

71% match

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas, with its position updating in real time based on the pointer's coordinates. The React component uses the `useState` and `useCallback` hooks to manage and optimize the mouse position state, while the `onMouseMove` event handler captures the cursor's `clientX` and `clientY` values. The visualization is rendered through ReactDOM, which mounts the SVG element into the HTML body, with the circle's center point and radius defined as constants within the code.

NNicolás Troncoso

71% match