Эффект тесселяции при наведении на ячейку в grid css

$tileSize: 5vw;
$ratio: 2.6;
$colors: (
  primary: #DAEAEF,
    secondary: #272F32
);

html,body {
    margin:  0;
    padding: 0;
    overflow: hidden;
  .grid {
    margin-left: -$tileSize;
    margin-right: -$tileSize*2;
    display: grid;
    grid-template-columns: repeat(auto-fill, $tileSize*($ratio/1.5));
    grid-template-rows:    repeat(50, $tileSize*3);
    background: map-get($colors, secondary);
    .tile {
      position: relative;
      height: $tileSize;
      width: $tileSize;
      transform-origin: top right;
      transition: all .75s ease-out;
      &:nth-child(2n) {
        margin-top: $tileSize;
        transform: rotate(60deg);
      } 
      &:hover {
        transition: none;
        filter: blur($tileSize/2) saturate(20);
        z-index: 9999;
      }
      .lobe {
        position: absolute;
        width: $tileSize+.15;
        height: $tileSize+.3;
        transform-origin: 100% 1%;
        background-color: #000;
        transition: inherit;
        background: map-get($colors, primary);
        &:nth-child(1) {
          transform: rotate(0deg) skewy(30deg) scalex($ratio/1.5) ;
        }
        &:nth-child(2) {
          transform: rotate(120deg) skewy(30deg) scalex($ratio/1.5);
        }
        &:nth-child(3) {
          transform: rotate(240deg) skewy(30deg) scalex($ratio/1.5);
        }
      }
    }
  }
}