<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" width="100%" 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">
    <animate attributeName="d" dur="3s" repeatCount="indefinite" fill="freeze" values="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; 
                   
                   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;
          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;
       M421,343Q357,436,257,423.5Q157,411,94,330.5Q31,250,89,160.5Q147,71,253,66Q359,61,422,155.5Q485,250,421,343Z;
     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" />
  </path>
</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%);
}

svg {
  height: 100vh;
  width: auto;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.