<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.