SVG cursors experiments

dabblet.css

/**
 * SVG cursors experiments
 */

html {
height: 100vh;
animation: test 0.01s infinite;
--image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 100 100">\
	<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\
	<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>');
cursor: -webkit-image-set(var(--image) 2x), not-allowed;
}
@keyframes test {
	to {
		cursor: -webkit-image-set(var(--image) 2x), pointer;
	}
}

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}