<div class ="container">
        <svg  width="100%" height="100%" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
        <path class="star" d="M246.573,89.84l42.511,126.463l137.566,0l-111.293,78.158l42.51,126.462l-111.294,-78.158l-111.293,78.158l42.51,-126.462l-111.293,-78.158l137.566,0l42.51,-126.463Z"/>
        </svg>
    </div>

.container {
  width: 50%;
  margin: 0 auto;
}
    
.star {
    fill: none;
    stroke: #7d2d68;
    stroke-width: 17px;

/* Stroke-dasharray property */
/*     stroke-dasharray: 50; 
    stroke-dashoffset: 50; */
/*     stroke-dashoffset: 500px; */
/*     stroke-dasharray: 1353px;
    stroke-dashoffset: 1353px; */
/*    animation: move 2s linear infinite;      */
   animation: move 3s linear; 
   animation-fill-mode: forwards;
}

@keyframes move {
    100% {
        stroke-dashoffset: 0;
    }
}

 let path = document.querySelector(".star");
 let length = path.getTotalLength();
 // console.log(length);

 path.style.strokeDasharray = length + ' ' + length;
 path.style.strokeDashoffset = length;