<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100vh">
  <defs>
    <pattern id="blocks" patternUnits="userSpaceOnUse"  width="200" height="200">
      <rect width="100" height="100" class="topleft black" />
      <rect width="100" height="100" class="topright white" x="100"/>
      <rect width="100" height="100" class="bottomleft white" y="100"/>
      <rect width="100" height="100" x="100" y="100" class="bottomright black" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#blocks)" />
</svg>

/* inspired by Just van Rossum's recent work (https://dailydrawbot.tumblr.com/post/138340184405/screen). Chrome or Safari */

@keyframes backgroundshift {
  49.99% {
    background: white;
  }
  50% {
    background: black;
  }
  100% {
    background: black;
  }
}

@keyframes scaleshift {
  0% {
    transform: scale(.001);
    rx: 50;
  }
  35% { 
    rx: 40;
  }
  50% { 
    transform: scale(1);
    rx: 0;
  }
  100% { 
    transform: scale(1);
    rx: 0;
  }
}
body {
  min-height: 100vh;
  margin: 0;
  animation: backgroundshift 3s alternate infinite;
}
svg { min-height: 100vh; }
pattern rect {
  animation: scaleshift 3s infinite cubic-bezier(.36,.17,.86,.67);
}
.black {
  fill: black;
  animation-direction: alternate;
}
.white {
  fill: white;
  animation-direction: alternate-reverse;
}
.topleft { 
  transform-origin: 50px 50px;
}
.bottomleft { 
  transform-origin: 50px 150px;
}
.topright {
  transform-origin: 150px 50px;
}
.bottomright { 
  transform-origin: 150px 150px;
}