Snap and svg anim
by makingthings
HTML
<script src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg width="600" height="425">
<path d="M 175, 175 m 0, -75 a 75,75 0 1,0 0,150 a 75,75 0 1,0 0,-150" fill="none" stroke="black" stroke-width="50" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000">
<animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="500" dur="2s" repeatCount="1" fill="freeze"/>
</path>
</svg>