Smooth continuous CSS animation blob flow - css

Question

I am trying to make a lively blob that blobs smoothly around the shape's plane. However, when I make this approach, the blob is very rigid and the flow of 0-25-50-75-100 can be directly seen in the animation. I am guessing this is because of the ease-in-out transition but I am not sure what to do next. I have tried linear, ease-in, ease-out, and ease-in-out but they are all very choppy
What should I change to make it a smoother animated blob?
.shape-container{
display: flex;
align-items: center;
justify-content: center;
height:100vh;
}
.shape{
width: 400px;
height: 400px;
background: linear-gradient(64deg, #f34868 23%, #f24768 23%, #9e00ec 80%);
animation: blob 8s ease-in-out infinite;
}
#keyframes blob {
0%, 100% {
border-radius:65% 100% 80% 100%
}
25% {
border-radius:100% 80% 100% 65%
}
50% {
border-radius:80% 100% 65% 100%
}
75% {
border-radius:100% 65% 100% 80%
}
}
<div class="shape-container">
<div class="shape"/>
</div>
[UPDATE] This is the 2nd blob I tried, this blob also does not smoothly rotate around, it just goes back and forth
.shape-container{
display: flex;
align-items: center;
justify-content: center;
height:100vh;
}
.shape{
width: 400px;
height: 400px;
background: linear-gradient(64deg, #f34868 23%, #f24768 23%, #9e00ec 80%);
animation: blob 8s ease-in-out infinite;
}
#keyframes blob {
0%, 100% {
border-radius:24% 76% 35% 65% / 27% 36% 64% 73%
}
25% {
border-radius:76% 24% 33% 67% / 68% 55% 45% 32%
}
}
<div class="shape-container">
<div class="shape"/>
</div>

Answer 1

I would have another look at the linear animation timing function because it has the same speed from start to end. Also if you combine the blob animation with a rotate animation you don't easily get the idea there is a pattern in the entire animation.
* {
margin: 0;
padding: 0;
}
.shape-container{
display: flex;
align-items: center;
justify-content: center;
height:100vh;
background-color: #222;
}
.shape{
width: 400px;
height: 400px;
background: linear-gradient(64deg, #f34868 23%, #f24768 23%, #9e00ec 80%);
border-radius: 28% 72% 22% 78% / 39% 23% 77% 61%;
transform: rotate(0deg);
will-change: border-radius, transform;
animation: blob 10s linear infinite, spin 100s linear infinite;
}
#keyframes blob {
0%, 100% {
border-radius: 28% 72% 22% 78% / 39% 23% 77% 61%;
}
50% {
border-radius: 72% 28% 50% 50% / 55% 26% 74% 45%;
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div class="shape-container">
<div class="shape"/>
</div>