Custom cursors using data-uri

The data-uri among other things allows you to use inline graphics in CSS using base64 encoded strings. This can be handy as you will have all resources in one file - your CSS file. The method requires you to Base64 encode your image, converting the binary data into a long string which you then use in CSS.

This example uses a Base64 encoded icon/pointer which is then used as a custom cursor in the CSS. The fourth example uses SVG based cursor.

This area has a custom cursor no 1

This area has a custom cursor no 2

This area has a custom cursor no 3 (my daughter asked if I could make this :-))

Here a SVG external cursor is used

This is the cursor1

Source CSS

.cursor1 {
  cursor: url(data:image/png;base64,iVBORw0KGgoAASUhEUgAAACAAAAAgCAYAAABzenr0AAAJFklEQVR42rWXCXBU9R3Hv+/V...), auto;
}
.svg {
  cursor: url(http://cursor.in/assets/copy.svg), auto;
}