JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="morph"></div>

CSS

body {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.morph {
  animation: morph 8s ease-in-out infinite;
  background: url("https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgicon.png");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border: 3px solid #2d2e32;
  border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  height: 128px;
  position: relative;
  transition: all 1s ease-in-out;
  width: 128px;
  margin: auto;
}

@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }

  50% {
    border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
  }

  100% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }
}