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="M161.3169650865706 21.004874880963186 C128.8453583015074 -1.2287857919302532 22.659792429808626 22.567191841770807 8.639737505088348 59.339178108886685 C-6.492075654816672 99.02709864131575 62.89748692254698 189.40546569720453 104.05074970525295 199.91792345132777 C124.41269012200905 205.11931026610728 169.01327137059445 180.10413072657963 178.83391718059468 161.5240887942531 C195.37708649402407 130.2254567608992 190.52743810927564 41.00560196479441 161.3169650865706 21.004874880963186Z" stroke="none" fill="url(#lgrad)"  />
</svg>
Blob Generator

resources
