Blob Generator

					
<style>
  .float {  
    animation-name: ani-float;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; 
  }
 
  @keyframes ani-float {
    0% { transform: translate(0,  0px); }
    50% { transform: translate(0, 15px); }
    100% { transform: translate(0, -0px); }    
  }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" 
  viewBox="-25 -25 250 250" class="float"> 
  <defs>
   <linearGradient id="lgrad" x1="0%" y1="50%" x2="100%" y2="50%" >
     <stop offset="0%" style="stop-color:#00FF84;stop-opacity:1.00" />
     <stop offset="100%" style="stop-color:#008EE6;stop-opacity:1.00" />
   </linearGradient>
  </defs>
  <path d="M146.26228486381314 11.344481281877279 C110.71259161153802 -8.664887315771164 13.008741769269765 46.73056587625309 1.0241957048845336 85.72449075741943 C-7.799569024049388 114.43423221618241 32.1684501965715 177.09424540949365 58.74220597103317 191.09223035947332 C80.92598034251506 202.77774980283996 142.3949780278433 200.26691640641718 158.53431908688611 181.07856368384063 C185.9194777649842 148.5198562275251 183.3371987590828 32.212329918209804 146.26228486381314 11.344481281877279Z" stroke="none" fill="url(#lgrad)"  />
</svg>
Blob Generator

resources
