<div>
  <svg width="300" height="300" viewbox="0 0 200 200">
  <g id="star-stroke" transform="translate(10 10)">
    <polygon
      stroke="orangered" stroke-width="2"
      fill="none"
      stroke-dasharray="5% 500%"
    points="87.9999978 137.940241 76.5136936 175.247148 75.074515 136.238569 54.3238608 169.3014 63.029877 131.249516 34.428992 157.815092 52.6869168 123.313083 18.1849071 141.571007 44.7504839 112.970122 6.69860358 121.676148 39.7614329 100.92549 0.752853633 99.4863158 38.0597591 87.9999956 0.752852903 76.5136897 39.761432 75.0745129 6.69860144 54.3238572 44.7504823 63.0298803 18.1849037 34.4289973 52.6869146 52.6869195 34.4289876 18.1849112 63.0298846 44.7504798 54.3238847 6.69859007 75.0745176 39.7614308 76.5137192 0.752849023 88.0000006 38.0597591 99.4863245 0.752854774 100.925484 39.7614311 121.676156 6.69860693 112.970137 44.7504923 141.571047 18.184938 123.313095 52.6869288 157.815123 34.4290322 131.249524 63.0298917 169.301415 54.3238979 136.238571 75.0745255 175.247153 76.5137334 137.940241 88.0000087 175.247143 99.4863387 136.238567 100.925491 169.301388 121.676169 131.249516 112.970123 157.815079 141.571025 123.313065 123.3131 141.570956 157.815132 112.970101 131.249528 121.676089 169.301421 100.925467 136.238573 99.4862524 175.247155 ">
      <animate attributeName="stroke-dasharray" attributeType="CSS"
             from="0% 10%" to="50% 0%"
             begin="0s" dur="10s" 
             repeatDur ="indefinite" />
      <animate attributeName="stroke-dasharray" attributeType="CSS"
             from="50% 0%" to="0% 10%"
             begin="10s" dur="20s" />
      <animate attributeName="stroke" attributeType="CSS"
             from="crimson" to="steelblue"
             begin="0s" dur="10s" />
      <animate attributeName="stroke" attributeType="CSS"
             from="steelblue" to="crimson"
             begin="10s" dur="20s" />
    </polygon>
  </g>  
</svg>
</div>
DIV {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 300px;
  height: 300px;
  margin: auto;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.