blobs under image thumbnails

blobs.scss

// given html that looks like this
//
// <div class="project__thumbnail">
//    <img class="project__image" />
// </div>

.project__thumbnail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 75%;
  opacity: 75%;
  transform: translate3d(-50%, -50%, 0);
  
  background-image: linear-gradient(to right, var(--gradient-blue));

  --blob-radius-1: 35% 65% 19% 81% / 63% 50% 50% 37%;
  --blob-radius-2: 77% 23% 30% 70% / 64% 69% 31% 36%;
  --blob-radius-3: 38% 62% 66% 34% / 29% 43% 57% 71%;
  --blob-radius-4: 54% 46% 45% 55% / 19% 79% 21% 81%;
}

@for $i from 1 through 4 {
  .project:nth-of-type(#{$i}) .project__thumbnail::after {
    border-radius: var(--blob-radius-#{$i});
    animation: wobble-#{$i} 30s ease-in-out alternate infinite;
  }
}

@for $i from 1 through 4 {
  $kf1: random(4);
  $kf2: random(4);

  @if $kf1 == $i {
    $kf1: random(4);
  }

  @if $kf2 == $i {
    $kf2: random(4);
  }

  @keyframes wobble-#{$i} {
    0% { border-radius: var(--blob-radius-#{random($i)}); }
    50% { border-radius: var(--blob-radius-#{$kf1}); }
    100% { border-radius: var(--blob-radius-#{$kf2}); }
  } 
}

.project__image {
  z-index: 10;
  filter: 
    drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.08)) 
    drop-shadow(0px 8px 32px rgba(0, 0, 0, 0.12));
}