<div></div>

<svg width="0" height="0">
  <defs>
    <clipPath id="my-shape">
      <path d="M89.6342913,129 C86.6318679,137.611315 85,146.865086 85,156.5 C85,200.767808 119.448105,236.989829 163,239.821749 L163,300 L300,300 L300,163 L251.750745,163 C251.915896,160.855015 252,158.687329 252,156.5 C252,110.384223 214.615777,73 168.5,73 C146.712501,73 126.873981,81.3445721 112.006052,95.0121046 L64.5,0 L0,129 L89.6342881,129 Z">
      </path>
    </clipPath>
  </defs>
</svg>
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 50vh;
  height: 50vh;
  background: linear-gradient(45deg, #3023AE 0%, #FF0099 100%);
  animation: magic 5s infinite;
  
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2vw;
    font-weight: 900;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5),-1px -1px 1px rgba(0,0,0,.5);
    animation: changeContent 5s  infinite;
  }
}

@keyframes magic {
  0% {
    clip-path:inset(5% 5% 5% 5%);
    animation-timing-function: cubic-bezier(0, 0, 0.9,-0.15);
  }
  10% {
    clip-path: inset(25% 0 round 0% 25%);
    animation-timing-function:cubic-bezier(0, 1.14, 1, 1);
  }
  20% {
    clip-path: ellipse(30% 20% at 50% 50%);
    animation-timing-function: cubic-bezier(0.08, 1.13, 0.21, 0.32);
  }
  30% {
    clip-path: circle(50% at 50% 50%);
    animation-timing-function: cubic-bezier(0.91, 0.1, 0, 0.79);
  }
  40% {
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    animation-timing-function: cubic-bezier(0.06, 1.16, 1,-0.42);
  }
  50% {
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
     animation-timing-function: cubic-bezier(0.06, 1.16, 1,-0.42);
  }
  60% {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    animation-timing-function: cubic-bezier(0.91, 0.1, 0, 0.79);
  }
  70% {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation-timing-function: cubic-bezier(0.08, 1.13, 0.21, 0.32);
  }
  80% {
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    animation-timing-function:cubic-bezier(0, 1.14, 1, 1);
  }
  90% {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation-timing-function: cubic-bezier(0.91, 0.1, 0, 0.79);
  }
  100% {
    clip-path: url(#my-shape);
    animation-timing-function:cubic-bezier(0, 1.14, 1, 1);
  }
}

@keyframes changeContent {
  0% {
    content: 'inset()';
  }
  10% {
    content: 'inset()';
  }
  20% {
    content: 'ellipse()';
  }
  30% {
    content: 'circle()';
  }
  40% {
    content: 'polygon()';
  }
  50% {
    content: 'polygon()';
  }
  60% {
    content: 'polygon()';
  }
  70% {
    content: 'polygon()';
  }
  80% {
    content: 'polygon()';
  }
  90% {
    content: 'polygon()'
  }
  100% {
    content: 'url()'
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.