SOURCE

var to = document.getElementById("to"),
    start=document.getElementById("start");//五角星图形
to.beginElement();
function start1(){
  start.beginElement();
}
setTimeout(start1,2000)//2秒后变回原样

<svg viewBox="0 0 200 200">
 <polygon 
          fill="red"
          points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9">
   <animate 
            id="to"
            attributeName="points"
            fill="freeze"
            dur="1200ms"
            begin="indefinite"
            to="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7"
            />

   <animate 
            id="start"
            attributeName="points"
            fill="freeze"
            dur="1200ms"
            begin="indefinite"
            to="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9"
            />
 </polygon> 
</svg>