fazlurr
6/22/2014 - 2:43 PM

CSS transitions on stroke-dasharray

CSS transitions on stroke-dasharray

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
// alert('Hello world!');
<svg width="200" height="200">
	<circle cx="100" cy="100" r="50" />
</svg>
/**
 * CSS transitions on stroke-dasharray
 */

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

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