Experiments with stroke-dasharray */

dabblet.css

/* Experiments with stroke-dasharray */
circle {
	stroke: hsl(200, 10%, 20%);
	stroke-opacity: .9;
	fill: transparent;
	stroke-width: 31.8;
}

dabblet.html

<svg>
	<circle cx="50" cy="50" r="15.9">
		<animate attributeName="stroke-dasharray" values="0,500;100,500;0,500" dur="5s" repeatCount="indefinite" />
		<animate attributeName="stroke-dashoffset" values="0;0;-100" dur="5s" repeatCount="indefinite" />
	</circle>
</svg>