<div class="container">
  <div class="segment">
    <div class="glitch">
      <span class="symbol shallow">404</span>
      <span class="symbol deep">404</span>
      <span class="line"></span>
    </div>
  </div>
  
  <div class="segment" style="background: black;">
    <div class="glitch darken">
      <span class="symbol shallow">404</span>
      <span class="symbol deep">404</span>
      <span class="line"></span>
    </div>
  </div>
</div>

body {
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif;
  line-height: 1.5;
  color: black;
  background-color: white;
  overflow: hidden;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.segment {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 300px;
  height: 200px;
}

.glitch {
  position: relative;
  font-size: 36px;
  line-height: 1;
}

.symbol {
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%) scale(3);
  white-space: nowrap;
  letter-spacing: 10px;
  text-indent: 10px;
  animation-name: symbol-move;
  animation-iteration-count: infinite;
  
  &.shallow {
    left: 1px;
    z-index: 2;
    text-shadow: 1px 0 0 red;
    animation-duration: 0.95s;
  }
  &.deep {
    left: 0;
    z-index: 3;
    text-shadow: 1px 0 0 cyan;
    mix-blend-mode: darken;
    animation-duration: 1.1s;
    animation-delay: 0.2s;
  }
}

.line {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 3px;
  background-color: white;
  animation: line-move 10s ease-out infinite;
}

.glitch.darken {
  .symbol {
    color: white;
  }
  
  .line {
    background-color: black;
  }
}

@keyframes symbol-move {
  10% { top: -0.8px; left: -2.2px; }
  20% { top: 0.8px; left: -0.4px; }
  30% { left: 1px; }
  40% { top: -0.6px; left: -1.4px; }
  50% { left: 0.4px; }
  60% { top: 3.6px; left: -2.4px; }
  70% { top: -2px; left: 0.2px; }
  80% { top: -0.8px; left: -1.8px; }
  90% { left: 2.4px; }
  100% { left: -2.4px; }
}

$symbol-height: 36px * 1 * 3 !default;

@keyframes line-move {
  0% { top: -60px; }
  9% { top: 25px; }
  14% { top: -30px }
  18% { top: 40px; }
  22% { top: -25px; }
  32% { top: 45px; }
  34% { top: -10px; }
  40% { top: 35px; }
  43% { top: -25px; }
  99% { top: 45px; }
  100% { top: 60px }
}