<div class="circle_box">
  <svg class="moving-outline" width="200" height="200" viewBox="0 0 200 200" fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <!--viewbox="시작점x 시작점y 넓이 높이"-->
    <circle cx="100" cy="100" r="95" stroke="#C89EC4" stroke-width="10" class="circle"/>
    <!--cx,xy 는 원의 중심좌표, 넓이와 높이의 중간지점으로 잡음. 지름은 stroke/2를 뺌-->
  </svg>
</div>

  .moving-outline circle {
    stroke-dasharray: 596;
    animation: dash 5s linear infinite;
    /*name duration timing-function delay iteration-count direction fill-mode;*/
    }
    @keyframes dash {
    from {
      stroke-dashoffset: 596;
    }
    to {
      stroke-dashoffset: 0;
    }
    }

    var cl = document.querySelector(".circle");
    function circleLine(el) {
      var line = el.getTotalLength();
      el.style.strokeDasharray = line;
      el.style.strokeDashoffset = line;

      console.log(line)
    }

    circleLine(cl);