body {
  align-items: center;
  background: black;
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}

img {
  -webkit-mask-image: url('logo.svg');
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 25%;
  display: block;
  margin: auto;
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  animation: anim 60s linear infinite;
}

@keyframes anim {
  0%,
  100% {
    filter: hue-rotate(0deg);
    -webkit-mask-position: 0% 100%;
  }

  10% {
    -webkit-mask-position: 100% 50%;
  }

  20% {
    -webkit-mask-position: 60% 0%;
  }

  30% {
    -webkit-mask-position: 12% 100%;
  }

  35% {
    -webkit-mask-position: 0% 85%;
  }
  
  50% {
    -webkit-mask-position: 100% 5%;
    filter: hue-rotate(180deg);
  }

  55% {
    -webkit-mask-position: 70% 0%;
  }

  70% {
    -webkit-mask-position: 55% 100%;
  }

  80% {
    -webkit-mask-position: 100% 10%;
  }
}