console
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.dy1{
stroke:blue;
fill:none;
stroke-width:100px;
stroke-dasharray:1260;
animation:dd infinite 1.5s ;
stroke-dashoffset:0;
transform-origin:center;
}
.dy2{
stroke:yellow;
fill:none;
stroke-width:100px;
stroke-dasharray:1260;
animation:dd infinite 1.5s 0.1s;
stroke-dashoffset:0;
transform-origin:center;
}
.dy3{
stroke:orange;
fill:none;
stroke-width:100px;
stroke-dasharray:1260;
animation:dd infinite 1.5s 0.3s;
stroke-dashoffset:0;
transform-origin:center;
}
@keyframes dd{
0%{stroke-dashoffset:1240;}
50%{stroke-dashoffset:1110;}
100%{stroke-dashoffset:1240;
transform:rotate(360deg)}
}
.xy1{
stroke:blue;
fill:none;
anlmation:xx infinite 3s;}
.xy2{stroke:yellow;
fill:none;
animation:xx infinite 1s;}
.xy3{stroke:orange;
fill:none;
animation:xx infinite 2s;}
@keyframes xx {0%,100%
{transform:translateY(0);}
50%{transform:translateY(-25px)}
}
</style>
</head>
<body>
<svg width="600px" height="600px">
<circle cx="300" cy="300" r=200 class="dy1"/>
<circle cx="300" cy="300" r=200 class="dy2"/>
<circle cx="300" cy="300" r=200 class="dy3"/>
<circle cx="250" cy="300" r=15 class="xy1"/>
<circle cx="300" cy="300"r=15 class="xy2"/>
<circle cx="200" cy="300" r=15 class="xy3"/>
</body>
</html>