<div class="wrap">
<div class="circle">
<img src='https://images.unsplash.com/photo-1547542928-dd9bc5371279?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
</div>
body {
background: #000;
}
.wrap {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.circle {
background: plum;
width: 200px;
height: 200px;
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
overflow: hidden;
animation: morph 3s linear infinite;
}
.circle img {
width: 100%;
}
@keyframes morph{
0%, 100% {
border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
}
34% {
border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
}
67% {
border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.