html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  overflow: auto;
  object-fit: contain;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  filter: drop-shadow(0 0 2rem #858585);
}

  .loader {
    color: #FFF;
    position: relative;
    z-index:var(--loaderZ, 1);
    background: #FFF;
    animation: escaleY 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
    animation-delay: -0.16s;
  }
  .loader:before,
  .loader:after {
    content: '';
    position: absolute;
    top: 0;
    left: 2em;
    background: #FFF;
    width: 1em;
    height: 4em;
    animation: escaleY 1s infinite ease-in-out;
  }
  .loader:before {
    left: -2em;
    animation-delay: -0.32s;
  }
  
  @keyframes escaleY {
    0%, 80%, 100% {
      box-shadow: 0 0;
      height: 4em;
    }
    40% {
      box-shadow: 0 -2em;
      height: 5em;
    }
  }