Interface Craft / Tooling

A cursor, and the tool built to design it.

Shape it live, trace over a reference, then export PNG, SVG, or a multi-resolution .cur. The playground at the bottom turns your own pointer into the design.

Best on a desktop browser with a mouse. Download the .cur Source on GitHub

Notes

Three problems that shaped the code.

Corners that wouldn't match

Rounding the traced points gave the nose a tighter curve than the two tails. Each corner is a cluster of clicked points, so the radius kept getting clamped by the short gaps between them. Rebuilding true corners from the long edges, then applying constant-radius tangent arcs, made every corner identical.

A kink in the keyline

Drawing the white border as one thick stroke self-intersects at the concave notch and leaves a visible dent. Replacing it with a proper outward dilation — a band along each edge plus a disc at each vertex — cleared it.

A border that vanished when small

At 16px the border worked out to half a device pixel and rendered as a pale haze rather than white. Small frames now thicken it just enough to hold one solid pixel, which is what keeps the cursor readable against any background.