console
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>.fs{cx:200; cy:200; r:5px;
animation: myframe1 8s infinite ease-in-out 0.5s alternate}
.z1{animation: myframe2 5s infinite ease-in-out 2s alternate}
@Keyframes myframe1{
0% {r:10px;fill:none;stroke:black;}
30% {r:100px;fill:none;stroke:black;}
60% {r:200px;fill:none;stroke:black;}
100% {r:300px:fill:none;stroke:black;}
}
@Keyframes myframe2{
.z11{animation: myframe2 5s 1 ease-in-out stroke-dasharray 0 150 100 0 2s }
0% {stroke-dasharray:50px;}
30% {stroke-dasharray:100px;}
60% {stroke-dasharray:50px;}
100% {stroke-dasharray:10px;}
}
@Keyframes myframe2
</style>
</head>
<body>
<svg width="500px" height="500px">
<circle class="fs" fill:none stroke-dasharray="10"/>
<rect class="z1" width="100" height="50"stroke="red"
fill="none" stroke-width="5" x="200" y="200" stroke-dasharray="15"/>
<set attributeName=class to="zz1" begin="mouseover"
attributeName=class to="z1" begin="mouseout"/>
</rect>
</svg>
</body>
</html>