<div class="container">
  <div class="blob"></div>
 </div>
@function random-pct() {
  @return random(30) + 40%;
}

.container 
{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:500px;
  height:500px;
}

.blob 
{
  width:100%;
  height:100%;
  
  background-color:orange;
  
  animation: spin 6s infinite linear;

  @for $i from 1 through 20 {
    $a: random-pct();
      $b: 100% - $a;
      $c: random-pct();
      $d: 100% - $c;
      $e: random-pct();
      $f: 100% - $e;
      $g: random-pct();
      $h: 100% - $g;
      border-radius: #{$a $b $c $d} / #{$e $f $g $h};
      animation-duration: 3s;
  }
}

@keyframes spin {
  from { background-color:orange;}
  to { 
    background-color:green;
    transform: rotate(-360deg); 
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.