<div class="container">
<div class="big-blob"></div>
<div class="blobs"></div>
<div class="blobs"></div>
</div>
<svg>
<filter id="gooey">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
<feColorMatrix in="blur" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 25 -18" result="contrast" />
</filter>
</svg>
:root {
--blue: #0a2bc5;
--yellow: #ffcc2f;
}
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: var(--blue);
}
.container {
filter: url('#gooey');
}
div.blobs {
background: var(--yellow);
width: 30px;
height: 30px;
position: absolute;
offset-path: path('M-2.49942505,8.7874147 C4.52775317,12.2064524 11.3921407,12.2064524 18.0937376,8.7874147 C28.146133,3.65885811 28.146133,-13.3979429 8.82754694,-17.9879156 C-10.4910391,-22.5778882 -23.1457428,-19.0670628 -31.5386951,4.36625841 C-39.9316474,27.7995796 -4.28843555,68.6949409 34.7084759,54.8415689 C73.7053873,40.9881969 90.3354587,9.86754694 81.8459418,-36.8197532 C73.3564249,-83.5070534 -25.4258151,-91.9863164 -45.0869451,-71.6603795 C-64.7480751,-51.3344425 -95.1337028,-22.0408451 -79.8240139,24.4609705 C-64.514325,70.9627862 -3.46161515,89.4571273 18.0937376,79.2268121 C39.6490904,68.9964969 64.9148327,52.3802189 68.0046783,20.7433959 C71.0945238,-10.893427 52.1572528,-43.0936393 27.1808776,-43.0936393 C2.20450232,-43.0936393 -5.78309464,-35.2053491 -9.97812023,-17.9879156 C-12.774804,-6.50962663 -10.2819056,2.41548347 -2.49942505,8.7874147 Z');
animation: rotate 10s ease infinite, liquid 3s linear infinite;
border-radius: 65% 75% 80% 70% / 45% 66% 70% 70%;
}
svg {
position: absolute;
}
.big-blob {
background: var(--yellow);
width: 50px;
height: 50px;
position: absolute;
border-radius: 65% 75% 80% 70% / 45% 66% 70% 70%;
animation: liquid 3s linear infinite;
top: -15px;
left: -15px;
}
div.blobs:last-child {
width: 20px;
height: 20px;
offset-path: path('M-4.71123307,16.5352174 C8.50655454,22.956337 21.4181407,22.956337 34.0235253,16.5352174 C52.9316022,6.90353792 52.9316022,-25.1299665 16.5942619,-33.750159 C-19.7430785,-42.3703516 -43.5459736,-35.7768501 -59.3327172,8.23207018 C-75.1194608,52.2409904 -8.07627662,129.044474 65.2750568,103.027166 C138.62639,77.0098571 169.906763,18.5637584 153.938386,-69.1172687 C137.970008,-156.798296 -47.834681,-172.722766 -84.8163303,-134.549664 C-121.79798,-96.3765632 -178.951898,-41.3617583 -150.155103,45.9709198 C-121.358307,133.303598 -6.52106683,168.036873 34.0235253,148.823842 C74.5681174,129.610811 122.091776,98.4046301 127.903628,38.9891333 C133.71548,-20.4263634 98.0953753,-80.8999328 51.1160028,-80.8999328 C4.13663032,-80.8999328 -10.8876592,-66.085339 -18.7783026,-33.750159 C-24.0387315,-12.1933724 -19.3497083,4.56841969 -4.71123307,16.5352174 Z');
}
@keyframes rotate {
to {
motion-offset: 100%;
offset-distance: 100%;
}
}
@keyframes liquid {
0%, 100% {
border-radius: 60% 70% 50% 60% / 65% 66% 60% 65%;
transform: rotate(0deg);
}
25% {
border-radius: 80% 70% 80% 60% / 60% 66% 60% 75%;
transform: rotate(90deg);
}
50% {
border-radius: 70% 60% 80% 60% / 60% 66% 75% 60%;
transform: rotate(180deg);
}
75 {
border-radius: 65% 75% 80% 70% / 45% 66% 70% 70%;
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.