How can I rotate a css cursor

Question

Here is what you need to do in order to have a clear view of what I want

• Go on this editor
• create a shape
• select it
• rotate it
• place your mouse on one of the resize control point then click

you'll see the cursor rotated with the angle of the shape.

I can't find any CSS properties to achieve this kind of thing, how could this be done?

Answer 1

Yes, in modern browsers (Chrome, Firefox, Safari) you can use an SVG encoded as a data URI as the CSS cursor:

cursor: url("data:image/svg+xml, ... ") 16 16, auto;

Encoding the SVG can be tricky, but is well documented here: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

The trick is then modifying the encoded SVG's transform property on the fly:

<svg viewBox="32 32"><g transform="rotate(45, 16, 16)">...</g></svg>

For instance, in the above example you'd swap out 45 for your desired angle.