SVG test

dabblet.css

/**
 * SVG test
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

svg circle {
	stroke: orange;
	stroke-width: 2px;
	r: 48px;
	animation: pulsate 1s infinite alternate ease-in-out;
}

@keyframes pulsate {
from { stroke-width: 2px; r: 44px; }
to { stroke-width: 3px; r: 48px; }
}

dabblet.html

<!-- SVG animation test -->
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="48" fill="none" stroke="currentcolor" stroke-width="3" />
</svg>

settings.json

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