<svg viewbox="0 0 100 100">
  <path fill="#1EB287">
    <animate 
             attributeName="d" 
             dur="3000ms" 
             repeatCount="indefinite"
             values="M 0,0 
                     C 50,0 50,0 100,0
                     100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     Z;

                     M 25,50 
                     C 37.5,25 37.5,25 50,0 
                     75,50 75,50 100,100
                     50,100 50,100 0,100
                     12.5,75 12.5,75 25,50
                     Z;"/>
  </path>
</svg>
* { box-sizing: border-box; }

body {
  height: 100vh;
  padding: 20vmin;
  background: #fcfcfc;
}

svg {
  width: 100%;
  height: 100%;
}

External CSS

  1. https://codepen.io/noahblon/pen/QYvmQe/caa6efe92005db0a8b9206328253c5cc.js

External JavaScript

This Pen doesn't use any external JavaScript resources.