- var r = 500;
- var w = 8*r, h = .5*w, x = -.5*w, y = -.5*h;
- var c = Math.round(r/Math.SQRT2);
- var l = Math.ceil((3*Math.PI + 4)*r);
- var d = ~~(Math.PI*r);

svg(viewBox=[x, y, w, h].join(' '))
	path#inf(d=`M${c}${-c}A${r} ${r} 0 1 1 ${c} ${c}L${-c}${-c}A${r} ${r} 0 1 0${-c} ${c}z`)
	use(xlink:href='#inf' stroke-dasharray=`${d} ${l - d}` stroke-dashoffset=`${l}px`)
View Compiled
html { background: #333 }
body { text-align: center }

svg {
	max-width: 25em;
	border-radius: 3px;
	box-shadow: 2px 2px 5px #000;
	background: #111;
	fill: none;
	stroke: #222;
	stroke-linecap: round;
	stroke-width: 8%
}

use {
	stroke: #fff;
	animation: a 2s linear infinite
}

@keyframes a { to { stroke-dashoffset: 0px } }
Run Pen

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.css

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js