How to create a blob with animation

<!-- index.html -->
<div class="blob"></div>

/* style.css */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     background-color: #282C34;
     height: 100vh;
     width: 100vw;
     display: flex;
     align-items: center;
     justify-content: center 
}
 .blob {
     overflow: hidden;
     width: 16rem;
     height: 16rem;
     border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
     background: #282C34 url("https://images.pexels.com/photos/775201/pexels-photo-775201.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
     background-size: cover;
     background-position: center;
     animation: morph 3.75s linear infinite;
}
 @keyframes morph {
     0%, 100% {
         border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
     }
     33% {
         border-radius: 72% 28% 48% 48% / 28% 28% 72% 72%;
     }
     66% {
         border-radius: 100% 56% 56% 100% / 100% 100% 56% 56%;
    }
}