CSS transitions on stroke-dasharray

dabblet.css

/**
 * CSS transitions on stroke-dasharray
 */

circle {
	stroke: red;
	stroke-width: 10;
	stroke-dasharray: 20, 20;
	transition: 1s;
}

circle:hover {
	stroke-dasharray: 40, 40;
	stroke-width: 20;
}

dabblet.html

<svg width="200" height="200">
	<circle cx="100" cy="100" r="50" />
</svg>

dabblet.js

// alert('Hello world!');

settings.json

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