<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" id="blobSvg">
<defs>
<linearGradient id="path1-a" x1="50%" x2="50%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#F5515F" />
<stop offset="100%" stop-color="#9F041B" />
</linearGradient>
</defs>
<path fill="url(#path1-a)" fill-rule="evenodd" d="M413.5,342Q356,434,260.5,416Q165,398,115,324Q65,250,117.5,180.5Q170,111,257,99.5Q344,88,407.5,169Q471,250,413.5,342Z" />
</svg>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Exo", Arial, sans-serif;
font-size: 20px;
font-weight: 600;
background: linear-gradient(to bottom, #0b0a27, #31304c 50%);
}
#blobSvg {
width: 30%;
height: auto;
}
#blobSvg path {
animation: bolb 5s cubic-bezier(1, 0.02, 0, 0.96) infinite alternate;
}
@keyframes bolb {
0% {
d: path(
"M413.5,342Q356,434,260.5,416Q165,398,115,324Q65,250,117.5,180.5Q170,111,257,99.5Q344,88,407.5,169Q471,250,413.5,342Z"
);
}
20% {
d: path(
"M413.5,342Q356,434,260.5,416Q165,398,115,324Q65,250,117.5,180.5Q170,111,257,99.5Q344,88,407.5,169Q471,250,413.5,342Z"
);
}
40% {
d: path(
"M391.5,334.5Q348,419,241,435.5Q134,452,110.5,351Q87,250,113,154Q139,58,237.5,80Q336,102,385.5,176Q435,250,391.5,334.5Z"
);
}
60% {
d: path(
"M379,329Q341,408,257,395.5Q173,383,114.5,316.5Q56,250,100,158Q144,66,255,57.5Q366,49,391.5,149.5Q417,250,379,329Z"
);
}
80% {
d: path(
"M421,343Q357,436,257,423.5Q157,411,94,330.5Q31,250,89,160.5Q147,71,253,66Q359,61,422,155.5Q485,250,421,343Z"
);
}
100% {
d: path(
"M372.5,330Q342,410,240.5,426.5Q139,443,110.5,346.5Q82,250,110.5,154Q139,58,254,51Q369,44,386,147Q403,250,372.5,330Z"
);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.