<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="target">
  <circle class="st0" cx="25" cy="25" r="20" />
</svg>
.target {
  width: 50%;
  aspect-ratio: 1/1;
  stroke: #000; // 線の色
  stroke-width: 1px; // 線の太さ
  stroke-dasharray: 130; // 破線の長さ(間隔)
  stroke-opacity: 0; // 線の不透明度
  fill: blue; // 塗りの色
  fill-opacity: 0; // 塗りの不透明度
  stroke-linecap: round; // パスの端の形状
  stroke-linejoin: round; // パスの繋ぎ目の形状
  circle {
    animation: circle linear 6s forwards;
  }
}
 
@keyframes circle {
  0% {
    fill: blue;
    fill-opacity: 0;
    stroke-width: 1px;
    stroke-dashoffset: 130;
    stroke-opacity: 0;
    stroke-dasharray: 130;
  }
  30% {
    fill: green;
    fill-opacity: 1;
    stroke-width: 4px;
    stroke-dashoffset: 0;
    stroke-opacity: 1;
    stroke-dasharray: 130;
  }
  50% {
    fill: green;
    fill-opacity: 1;
    stroke-width: 4px;
    stroke-dashoffset: 0;
    stroke-opacity: 1;
    stroke-dasharray: 100;
  }
  70% {
    fill: green;
    fill-opacity: 1;
    stroke-width: 4px;
    stroke-dashoffset: 0;
    stroke-opacity: 1;
    stroke-dasharray: 80;
  }
  80% {
    fill: green;
    fill-opacity: 1;
    stroke-width: 4px;
    stroke-dashoffset: 0;
    stroke-opacity: 1;
    stroke-dasharray: 50;
  }
  90% {
    fill: green;
    fill-opacity: 1;
    stroke-width: 4px;
    stroke-dashoffset: 0;
    stroke-opacity: 1;
    stroke-dasharray: 30;
  }
  100% {
    fill: green;
    fill-opacity: 1;
    stroke-width: 4px;
    stroke-dashoffset: 0;
    stroke-opacity: 1;
    stroke-dasharray: 10;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.