Skip to main content
SimilarExport ZIP
100%

Curran's Golden Compass with Mouse Following

✓ Published0🌍 Public
CCora
Last edited Apr 9, 2025
Created on Apr 9, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Golden Compass with Mouse Following

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.

CCurran Kelleher
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
78% match
Loading thumbnail…

Mouse Follower

A 960-by-500 SVG circle follows the mouse cursor across the canvas, its center updating in real time to match the pointer’s client coordinates. Built with React and ReactDOM, the example uses the `useState` hook to store the cursor position and a `useCallback`-wrapped `onMouseMove` event handler to update it. The SVG circle is rendered with a fixed radius of 30 pixels, demonstrating state-driven drawing within a minimal React component.

CCaroline Ghisolfi
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…

Mouse Follower

A yellow circle inside an SVG canvas tracks the mouse cursor, updating its position in real time. Built with React and rendered as SVG, the app uses a `useState` hook to store the cursor’s coordinates and a `useCallback` handler that listens to the SVG’s `onMouseMove` event, updating the circle’s `cx` and `cy` attributes accordingly. The example demonstrates a simple interactive pointer-following visual.

Ssuserocc
71% match
Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across a 960-by-500 SVG canvas. Built with React and ReactDOM, the app tracks pointer coordinates via an `onMouseMove` handler on the SVG element, storing them in state with `useState` and updating them through `useCallback`. Each move re-renders the circle's `cx` and `cy` attributes, creating a direct, responsive visual link between pointer position and the rendered shape.

Ttotallynormalpeep
71% match
Loading thumbnail…

Mouse Follower

This example demonstrates a mouse-following circle that changes position with cursor movement and shifts to a random color on click. The visualization starts with a blue circle centered in the viewport, then uses d3’s `select`, `pointer`, and `join` methods to render an SVG and update its attributes. State changes follow immutable update patterns, spreading the previous state and overriding specific properties like `x`, `y`, and `color`. The code also relies on container dimensions and event listeners for `mousemove` and `click` interactions.

CCurran Kelleher
71% match
Loading thumbnail…

Mouse Follower

A React-based SVG visualization tracks the mouse cursor with a single orange circle, updating its position in real time as the user moves across the viewport. The app uses React’s `useState` and `useCallback` hooks to manage the cursor coordinates, while D3’s `arc` import is included but unused. The circle renders via SVG inside a fixed 960×500 canvas, with the initial position centered before any mouse movement. The `onMouseMove` event handler on the `<svg>` element captures client coordinates and triggers a state update, seamlessly animating the follower through React’s rendering lifecycle.

Ccynichole
71% match