console
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
svg{
width:500px;
height:500px;
}
.y1{
fill:none;
stroke:skyblue;
stroke-width:100px;
stroke-dasharray:1256;
stroke-dashoffset:0;
animation:ly1 2s infinite;
transform-origin:center;
}
.y2{
fill:none;
stroke:green;
stroke-width:100px;
stroke-dasharray:1256;
stroke-dashoffset:0;
animation:ly1 2s 0.15s infinite;
transform-origin:center;
}
.y3{
fill:none;
stroke:red;
stroke-width:100px;
stroke-dasharray:1256;
animation:ly1 2s 0.32s infinite;
stroke-dashoffset:0;
transform-origin:center;
}
@Keyframes ly1{
0%{stroke-dashoffset:1220;}
50%{stroke-dashoffset:1100;}
100%{stroke-dashoffset:1220;
transform:rotate(360deg);}
}
.xy1{
fill:skyblue;
animation:txy1 1s infinite;
}
.xy2{
fill:green;
animation:txy1 1s 0.25s infinite;
}
.xy3{
fill:red;
animation:txy1 1s 0.5s infinite;
}
@Keyframes txy1{
0%,100%{
transform:translateY(0px);
}
50%{
transform:translateY(-50px);
}
}
</style>
</head>
<body>
<svg>
<circle cx="250" cy="250" r="200" class="y1"/>
<circle cx="250" cy="250" r="200" class="y2"/>
<circle cx="250" cy="250" r="200" class="y3"/>
<circle cx="210" cy="250" r="15" class="xy1"/>
<circle cx="250" cy="250" r="15" class="xy2"/>
<circle cx="290" cy="250" r="15" class="xy3"/>
</svg>
</body>
</html>