body {
  margin: 0;
}

.glitch {
  background: #000 no-repeat center;
  background-size: 0;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.glitch::before, .glitch::after,
.glitch .channel {
  background: inherit;
  background-size: cover;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.glitch::before {
  animation: glitch-before 3s linear 4s infinite alternate both;
  content: "";
}
@keyframes glitch-before {
  1% {
    -webkit-clip-path: polygon(0% 71.7532024371%, 100% 71.7532024371%, 100% 77.3277201419%, 0% 77.3277201419%);
            clip-path: polygon(0% 71.7532024371%, 100% 71.7532024371%, 100% 77.3277201419%, 0% 77.3277201419%);
    transform: translate(4.1709204669%, -0.1426055302%);
  }
  2% {
    -webkit-clip-path: polygon(0% 54.5982421517%, 100% 54.5982421517%, 100% 56.7074169834%, 0% 56.7074169834%);
            clip-path: polygon(0% 54.5982421517%, 100% 54.5982421517%, 100% 56.7074169834%, 0% 56.7074169834%);
    transform: translate(4.8276792318%, 0.091291937%);
  }
  4% {
    -webkit-clip-path: polygon(0% 13.1792109832%, 100% 13.1792109832%, 100% 21.0862408694%, 0% 21.0862408694%);
            clip-path: polygon(0% 13.1792109832%, 100% 13.1792109832%, 100% 21.0862408694%, 0% 21.0862408694%);
    transform: translate(-7.4439374661%, 0.0748326032%);
  }
  6% {
    -webkit-clip-path: polygon(0% 81.9248390622%, 100% 81.9248390622%, 100% 86.5117025787%, 0% 86.5117025787%);
            clip-path: polygon(0% 81.9248390622%, 100% 81.9248390622%, 100% 86.5117025787%, 0% 86.5117025787%);
    transform: translate(5.3801352462%, 0.4915339117%);
  }
  8% {
    -webkit-clip-path: polygon(0% 27.3521954868%, 100% 27.3521954868%, 100% 29.9187403182%, 0% 29.9187403182%);
            clip-path: polygon(0% 27.3521954868%, 100% 27.3521954868%, 100% 29.9187403182%, 0% 29.9187403182%);
    transform: translate(3.9206616877%, 0.0701444166%);
  }
  10% {
    -webkit-clip-path: polygon(0% 14.0109697602%, 100% 14.0109697602%, 100% 18.1899753003%, 0% 18.1899753003%);
            clip-path: polygon(0% 14.0109697602%, 100% 14.0109697602%, 100% 18.1899753003%, 0% 18.1899753003%);
    transform: translate(7.0634375565%, -0.1554768144%);
  }
  12% {
    -webkit-clip-path: polygon(0% 33.0779238809%, 100% 33.0779238809%, 100% 34.45574526%, 0% 34.45574526%);
            clip-path: polygon(0% 33.0779238809%, 100% 33.0779238809%, 100% 34.45574526%, 0% 34.45574526%);
    transform: translate(0.1685787895%, -0.1774885829%);
  }
  14% {
    -webkit-clip-path: polygon(0% 80.6031189889%, 100% 80.6031189889%, 100% 85.8765547311%, 0% 85.8765547311%);
            clip-path: polygon(0% 80.6031189889%, 100% 80.6031189889%, 100% 85.8765547311%, 0% 85.8765547311%);
    transform: translate(-3.8717634769%, -0.462048388%);
  }
  16% {
    -webkit-clip-path: polygon(0% 36.8425992084%, 100% 36.8425992084%, 100% 41.9218658465%, 0% 41.9218658465%);
            clip-path: polygon(0% 36.8425992084%, 100% 36.8425992084%, 100% 41.9218658465%, 0% 41.9218658465%);
    transform: translate(-0.2684604565%, -0.4138737797%);
  }
  18% {
    -webkit-clip-path: polygon(0% 87.6975551022%, 100% 87.6975551022%, 100% 91.9391417043%, 0% 91.9391417043%);
            clip-path: polygon(0% 87.6975551022%, 100% 87.6975551022%, 100% 91.9391417043%, 0% 91.9391417043%);
    transform: translate(6.7979036086%, -0.4261544188%);
  }
  0%, 20%, 100% {
    -webkit-clip-path: none;
            clip-path: none;
    transform: none;
  }
}
.glitch::after {
  animation: glitch-after 3s linear 4s infinite alternate both;
  content: "";
}
@keyframes glitch-after {
  1% {
    -webkit-clip-path: polygon(0% 23.0198504218%, 100% 23.0198504218%, 100% 29.915677483%, 0% 29.915677483%);
            clip-path: polygon(0% 23.0198504218%, 100% 23.0198504218%, 100% 29.915677483%, 0% 29.915677483%);
    transform: translate(5.0726169937%, 0.4629996419%);
  }
  2% {
    -webkit-clip-path: polygon(0% 86.9097432586%, 100% 86.9097432586%, 100% 88.8745505999%, 0% 88.8745505999%);
            clip-path: polygon(0% 86.9097432586%, 100% 86.9097432586%, 100% 88.8745505999%, 0% 88.8745505999%);
    transform: translate(0.6770351422%, 0.185353666%);
  }
  4% {
    -webkit-clip-path: polygon(0% 5.3431767189%, 100% 5.3431767189%, 100% 14.4011358514%, 0% 14.4011358514%);
            clip-path: polygon(0% 5.3431767189%, 100% 5.3431767189%, 100% 14.4011358514%, 0% 14.4011358514%);
    transform: translate(2.0083432953%, 0.1055679163%);
  }
  6% {
    -webkit-clip-path: polygon(0% 13.8115644447%, 100% 13.8115644447%, 100% 19.7001845761%, 0% 19.7001845761%);
            clip-path: polygon(0% 13.8115644447%, 100% 13.8115644447%, 100% 19.7001845761%, 0% 19.7001845761%);
    transform: translate(-1.0656571186%, 0.064834411%);
  }
  8% {
    -webkit-clip-path: polygon(0% 77.8031816907%, 100% 77.8031816907%, 100% 81.0850775029%, 0% 81.0850775029%);
            clip-path: polygon(0% 77.8031816907%, 100% 77.8031816907%, 100% 81.0850775029%, 0% 81.0850775029%);
    transform: translate(-4.7860971779%, 0.0834318282%);
  }
  10% {
    -webkit-clip-path: polygon(0% 43.2097420277%, 100% 43.2097420277%, 100% 44.6698555492%, 0% 44.6698555492%);
            clip-path: polygon(0% 43.2097420277%, 100% 43.2097420277%, 100% 44.6698555492%, 0% 44.6698555492%);
    transform: translate(0.7534293826%, 0.2760554886%);
  }
  12% {
    -webkit-clip-path: polygon(0% 12.3462232556%, 100% 12.3462232556%, 100% 21.4198440521%, 0% 21.4198440521%);
            clip-path: polygon(0% 12.3462232556%, 100% 12.3462232556%, 100% 21.4198440521%, 0% 21.4198440521%);
    transform: translate(7.563147066%, 0.2366226466%);
  }
  14% {
    -webkit-clip-path: polygon(0% 15.3362749447%, 100% 15.3362749447%, 100% 17.5721077949%, 0% 17.5721077949%);
            clip-path: polygon(0% 15.3362749447%, 100% 15.3362749447%, 100% 17.5721077949%, 0% 17.5721077949%);
    transform: translate(-5.4972894139%, -0.2563053121%);
  }
  16% {
    -webkit-clip-path: polygon(0% 30.4785016533%, 100% 30.4785016533%, 100% 33.1435046568%, 0% 33.1435046568%);
            clip-path: polygon(0% 30.4785016533%, 100% 30.4785016533%, 100% 33.1435046568%, 0% 33.1435046568%);
    transform: translate(-2.1232563859%, -0.4978883929%);
  }
  18% {
    -webkit-clip-path: polygon(0% 71.5347138308%, 100% 71.5347138308%, 100% 75.6936957666%, 0% 75.6936957666%);
            clip-path: polygon(0% 71.5347138308%, 100% 71.5347138308%, 100% 75.6936957666%, 0% 75.6936957666%);
    transform: translate(4.3208395802%, -0.2480703757%);
  }
  0%, 20%, 100% {
    -webkit-clip-path: none;
            clip-path: none;
    transform: none;
  }
}
.glitch .channel {
  mix-blend-mode: screen;
}
.glitch .channel::before {
  bottom: 0;
  content: "";
  display: block;
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.glitch .r {
  animation: rgb-shift-r 3s steps(1, jump-end) 4s infinite alternate both;
}
@keyframes rgb-shift-r {
  1% {
    transform: translate(-0.0556362552%, 0.1915991752%);
  }
  2% {
    transform: translate(-1.7410579362%, 0.3683221935%);
  }
  4% {
    transform: translate(1.9090977702%, -0.3941431942%);
  }
  6% {
    transform: translate(-0.8193122546%, 0.4960696318%);
  }
  8% {
    transform: translate(0.4054194328%, 0.2278348046%);
  }
  10% {
    transform: translate(-0.402079452%, 0.1590006895%);
  }
  12% {
    transform: translate(0.5821487525%, -0.4183056238%);
  }
  14% {
    transform: translate(-0.0445133214%, -0.3911513751%);
  }
  16% {
    transform: translate(0.7346772142%, -0.4161737404%);
  }
  18% {
    transform: translate(-1.4313523209%, -0.1811015156%);
  }
  0%, 20%, 100% {
    transform: none;
  }
}
.glitch .r::before {
  background: #f00;
}
.glitch .g {
  animation: rgb-shift-g 3s steps(1, jump-end) 4s infinite alternate both;
}
@keyframes rgb-shift-g {
  1% {
    transform: translate(1.7389044725%, 0.1382994871%);
  }
  2% {
    transform: translate(-1.6483743886%, 0.0081316493%);
  }
  4% {
    transform: translate(1.4062944922%, -0.0356610796%);
  }
  6% {
    transform: translate(-0.7745085309%, -0.0209715059%);
  }
  8% {
    transform: translate(-0.2078007339%, 0.1194247708%);
  }
  10% {
    transform: translate(-0.9259468753%, -0.1837094376%);
  }
  12% {
    transform: translate(0.2482712784%, 0.2766481758%);
  }
  14% {
    transform: translate(1.791687838%, 0.0197392336%);
  }
  16% {
    transform: translate(-1.6499388781%, -0.2495148389%);
  }
  18% {
    transform: translate(0.573461508%, -0.4929461603%);
  }
  0%, 20%, 100% {
    transform: none;
  }
}
.glitch .g::before {
  background: #0f0;
}
.glitch .b {
  animation: rgb-shift-b 3s steps(1, jump-end) 4s infinite alternate both;
}
@keyframes rgb-shift-b {
  1% {
    transform: translate(1.9179475753%, 0.0733042443%);
  }
  2% {
    transform: translate(-0.0370125364%, -0.0269454017%);
  }
  4% {
    transform: translate(-0.6452096364%, -0.1850600842%);
  }
  6% {
    transform: translate(-1.6647929784%, -0.2663688072%);
  }
  8% {
    transform: translate(-1.9308876193%, -0.1981758536%);
  }
  10% {
    transform: translate(-1.6225155275%, -0.4196871212%);
  }
  12% {
    transform: translate(0.2195804169%, -0.1768864653%);
  }
  14% {
    transform: translate(-1.0472221966%, -0.2545861822%);
  }
  16% {
    transform: translate(-1.9102029659%, 0.0435931311%);
  }
  18% {
    transform: translate(1.6420566579%, -0.0596468362%);
  }
  0%, 20%, 100% {
    transform: none;
  }
}
.glitch .b::before {
  background: #00f;
}