cvg 에니메이션 적용

1. html 에 svg

 

<div class="newSvg">
  <svg fill="none">
      <path d="M22 3.23607L25.9883 15.5106L26.2128 16.2016H26.9393H39.8456L29.4042 23.7877L28.8164 24.2148L29.0409 24.9058L33.0292 37.1803L22.5878 29.5942L22 29.1672L21.4122 29.5942L10.9708 37.1803L14.9591 24.9058L15.1836 24.2148L14.5958 23.7877L4.15444 16.2016H17.0607H17.7872L18.0117 15.5106L22 3.23607Z" stroke="black" stroke-width="2"/>
  </svg>
</div>

 

---

 

2. css 파일

 

.newSvg path {
    stroke-dasharray: 136;
    stroke-dashoffset: 0;
    animation: pathAni 5s linear infinite;
}

@keyframes pathAni {
    0% {
        stroke-dashoffset: 136;
    }
    50% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -136;
    }
}