SOURCE

<svg width="1000"height="1000">
    <!-- <circle cx="20"cy="20"r="10" class="y1"/>
     <circle cx="50"cy="20"r="10" class="y2"/>
      <circle cx="80"cy="20"r="10" class="y3"/>

       <circle cx="100"cy="200"r=""fill="none"stroke="gray"stroke-width="4" class="l1"/>
        <circle cx="100"cy="200"r=""fill="none"stroke="gray"stroke-width="4"class="l2"/>
         <circle cx="100"cy="200"r=""fill="none"stroke="gray"stroke-width="4"class="l3"/>
          <circle cx="100"cy="200"r=""fill="none"stroke="gray"stroke-width="4"class="l4"/>
  <rect width="10"height="100"y="300"x="200" class="zz" transform-origin="0% 0%" />     -->
<circle cx="150"cy="150"r="50"fill="none"stroke="grey"stroke-width="3" />
<circle cx="150"cy="150"r="50"fill="none"stroke-width="3"stroke="black" transform-origin="50% 50%"class="no"/>
<rect x="80"y="230"width="150"height="100"fill="transparent"stroke="black" >
<set attributeName="class" to="a1" begin="click"/>
 </rect>
<text x="80"y="300"font-size="40">Button1</text>
<text x="350"y="300"font-size="40">Button2</text>
</svg>

@keyframes fd{
    0%{
        r:5;
        fill: gainsboro
    }
     50%{
        r:8;
        fill: gray
    }
    100%{
        r:10;
        fill:black
    }
}
.y1{
animation: fd 1s infinite
}
.y2{
animation: fd 0.5s infinite
}
.y3{
animation: fd 1s infinite
}
@keyframes bian{
    0%{
     r:5;
     stroke-width:3; 
    }
   30%{
     r:10;
     stroke-width:3; 
    }
    60%{
     r:13;
     stroke-width:2;
    }
    100%{
     r:18;
     stroke-width:1; 
    }  
}

.l1{
    animation: bian 1s infinite;
}
.l2{
    animation: bian 3s infinite;
}

.l3{
    animation: bian 2s infinite;
}
.l4{
    animation: bian 2s infinite;
}
@keyframes zhan{
    0%{
        transform: rotate(0deg)
    }
    100%{
        transform:rotate(360deg)
    }
}
.zz{
    animation: zhan 2s infinite
}
@keyframes nono{
     0%{
        transform: rotate(0deg)
    }
    100%{
        transform:rotate(360deg)
    }
}
@keyframes zz{
    0%{
          stroke-dasharray: 0 250 150 100;
    }
    100%{
          stroke-dasharray: 500;
    }
}
.no{
    stroke-dasharray: 78 236;
    animation: nono 2s infinite linear;
}
.a1{
   animation:  zz 2s;
}