SVG Animation Morph

<!DOCTYPE html>
<title>My Example</title>

<svg width="300" height="300" style="margin: auto; display: block;" xmlns="http://www.w3.org/2000/svg">
  
  <path fill="mediumpurple" stroke="rebeccapurple" stroke-width="3">
    <animate 
      attributeName="d" 
      dur="4s" 
      repeatCount="indefinite" 
      values="
        M 150,50 C 150,50 250,150 250,150 C 250,150 150,250 150,250 C 150,250 50,150 50,150 C 50,150 150,50 150,50 Z;
        M 150,50 C 200,50 250,100 250,150 C 250,200 200,250 150,250 C 100,250 50,200 50,150 C 50,100 100,50 150,50 Z;
        M 150,50 C 210,50 250,90 250,150 C 250,210 210,250 150,250 C 90,250 50,210 50,150 C 50,90 90,50 150,50 Z;
        M 150,50 C 150,50 250,150 250,150 C 250,150 150,250 150,250 C 150,250 50,150 50,150 C 50,150 150,50 150,50 Z
      " />
      
    
    <animate attributeName="fill" dur="4s" repeatCount="indefinite"
             values="mediumpurple; tomato; dodgerblue; mediumpurple" />
  </path>
</svg>