<svg xmlns="http://www.w3.org/2000/svg" width="412" height="800" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="top" viewBox="0 0 412 72" preserveAspectRatio="xMinYMin meet">
      <path fill="#000" d="M186 72h-41V40a41 41 0 0 1 41-40h32c11 0 21 4 29 12 7 7 12 18 12 28v32h-41V41l-8-8h-16l-8 8v31ZM332 72h-41V40a41 41 0 0 1 41-40h32c11 0 21 4 29 12 7 7 12 18 12 28v32h-41V41l-8-8h-16l-8 8v31ZM114 72H73V40l-8-8H49l-8 8v32H0V40A40 40 0 0 1 40 0h33c10 0 21 4 28 12 8 7 13 18 13 28v32Z"/>
    </symbol>

    <symbol id="bottom" viewBox="0 0 412 72" preserveAspectRatio="xMinYMax meet">
      <path fill="#000" d="M0 0v32a40 40 0 0 0 40 40h33c10 0 21-4 28-12 8-7 13-18 13-28V0H73v32l-8 8H49l-8-8V0H0ZM145 0v32l3 15a40 40 0 0 0 38 25h32c11 0 21-4 29-12 7-7 12-18 12-28V0h-41v31l-8 8h-16l-8-8V0h-41ZM291 0v32l3 15a40 40 0 0 0 38 25h32c11 0 21-4 29-12 7-7 12-18 12-28V0h-41v31l-8 8h-16l-8-8V0h-41Z"/>
    </symbol>

    <symbol id="center" viewBox="0 0 412 176" preserveAspectRatio="xMinYMax meet">
      <path fill="#000" d="M0 176V0h41v176H0ZM405 176v-63.7a41 41 0 0 0-3.5-15.5 40.4 40.4 0 0 0-37.3-25h-24.3l-7.9-8V0h-41v63.7a40.9 40.9 0 0 0 40.8 40.5h24.3l7.9 8V176h41ZM332 176h-41v-23.2c0-2.2-.5-4.3-2-5.9a8.7 8.7 0 0 0-5.7-2.7v-7.6H324c2 .2 4 1.1 5.4 2.6a8.9 8.9 0 0 1 2.6 5.4V176ZM259 176h-41v-63.9l-8-8h-24.2A40.9 40.9 0 0 1 145 63.8V0h41v63.8l7.9 8h24.3a40.4 40.4 0 0 1 37.3 25 41 41 0 0 1 3.5 15.5V176ZM186 176h-41v-23.2c0-2.2-.5-4.3-2-5.9a8.7 8.7 0 0 0-5.7-2.7v-7.6H178c2 .2 4 1.1 5.4 2.6a8.9 8.9 0 0 1 2.6 5.4V176ZM114 176H73v-64c.2-2 .8-4 2.3-5.4a8.7 8.7 0 0 1 5.4-2.6h40.4v7.6a8.6 8.6 0 0 0-5.6 2.8c-1.5 1.6-1.5 3.6-1.5 5.8V176ZM73 63.2V0h41v56c0 2 0 4 1.4 5.5a8.7 8.7 0 0 0 5.7 2.8v7.5H80.6c-2-.2-4-1-5.4-2.5a8.4 8.4 0 0 1-2.2-6.1ZM218 31.3V0h41v23c0 2.3.3 4.3 1.8 6a8.7 8.7 0 0 0 5.7 2.7v7.5H226c-2-.1-4-1-5.4-2.5a8.9 8.9 0 0 1-2.6-5.4ZM364 31.3V0h41v23c0 2.3.3 4.3 1.8 6a8.7 8.7 0 0 0 5.7 2.7v7.5H372c-2-.1-4-1-5.4-2.5a8.9 8.9 0 0 1-2.6-5.4Z"/>
    </symbol>
  </defs>

  <style>
    .rect {
      height: calc(50% - 158px);
      fill: #000;
    }

    .rect--bottom {
      transform: translateY(87px);
    }

    .bottom {
      transform: translateY(-72px);
    }

    .center {
      transform: translateY(-88px);
    }
  </style>

  <use xlink:href="#top" x="0" y="0" height="72" width="100%" />
  <use class="bottom" xlink:href="#bottom" x="0" y="100%" height="72" width="100%" />
  <use class="center" xlink:href="#center" x="0" y="50%" height="176" width="100%" />
  <rect class="rect" width="41" height="100%" x="0" y="71" />
  <rect class="rect" width="41" height="100%" x="73" y="71" />
  <rect class="rect" width="41" height="100%" x="145" y="71" />
  <rect class="rect" width="41" height="100%" x="218" y="71" />
  <rect class="rect" width="41" height="100%" x="291" y="71" />
  <rect class="rect" width="41" height="100%" x="364" y="71" />
  <rect class="rect rect--bottom" width="41" height="100%" x="0" y="50%" />
  <rect class="rect rect--bottom" width="41" height="100%" x="73" y="50%" />
  <rect class="rect rect--bottom" width="41" height="100%" x="145" y="50%" />
  <rect class="rect rect--bottom" width="41" height="100%" x="218" y="50%" />
  <rect class="rect rect--bottom" width="41" height="100%" x="291" y="50%" />
  <rect class="rect rect--bottom" width="41" height="100%" x="364" y="50%" />
</svg>

body {
  min-height: 100vh;
  display: flex;
}
svg {
  display: block;
  height: calc(100vh - 4rem);
  width: 25.75rem;
  margin: 2rem auto;
  animation: shrink 2s cubic-bezier(0.65, 0, 0.35, 1) alternate infinite;
  animation-delay: -1.3s;
}

@keyframes shrink {
  70%, 100% {height: calc(60vh - 4rem);} 
}