<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
:hover {
animation-name: anim1a;
}
</style>
</head>
<body>
<svg width="300" height="200">
<defs>
<path id='base' d='M150 100m0-50a100 50 0 0 0 0 100a100 50 0 0 0 0-100z' fill='none'>
<animate attributeName='stroke-dasharray' from='485 10' to='10 485' begin='dblclick + anim2.end' dur='2s' fill='freeze' restart='whenNotActive' id='anim1' />
<animate attributeName='stroke-dasharray' from='10 485' to='485 10' begin='0s; (dblclick + anim1.end)' dur='2s' fill='freeze' restart='whenNotActive' id='anim2' />
<animate attributeName='stroke-dashoffset' from='242.5' to='0' begin='anim1.begin' dur='2s' fill='freeze' />
<animate attributeName='stroke-dashoffset' from='0' to='242.5' begin='anim2.begin' dur='2s' fill='freeze' />
</path>
</defs>
<use xlink:href="#base" stroke="orange" stroke-width="14"/>
<use xlink:href="#base" stroke="yellow" stroke-width="10"/>
</svg>
</body>
</html>