<section>

  <h1 data-name="Scooby Doo">

    <span>Scooby Doo</span>

  </h1>

</section>
body
  
  background-color: black
  
section
  
  display: flex
  width: 100vw
  height: 100vh
  
  h1
    
    margin: auto

    position: relative
    z-index: 1

    font-family: sans-serif
    font-size: 10vmin
    font-weight: 700

    //

    &:before, &:after

      mix-blend-mode: screen

    // Pseudo

    &:before, &:after

      content: attr(data-name)

      position: absolute
      z-index: 2

      top: 0

      width: 100%
      height: 100%

    &:before

      left: -5%

      color: #FF0000

      clip: rect(0, 1350px, 140px, 0)

      animation-name: glitchRed
      animation-duration: 1s
      animation-timing-function: linear
      animation-iteration-count: infinite

    &:after

      left: 5%

      color: #0000FF

      clip: rect(0, 1350px, 50px, 0)

      animation-name: glitchBlue
      animation-duration: 1s
      animation-timing-function: linear
      animation-iteration-count: infinite

    // Children

    span

      position: relative
      z-index: 1

      color: white

      clip: rect(0, 900px, 722px, 56px)

      animation-name: glitchGreen
      animation-duration: 4s
      animation-timing-function: linear
      animation-iteration-count: infinite
      
@keyframes glitchRed
  
  0%

    left: 0

    clip-path: inset(0% 0 0% 0)

  9%
  
    left: 0

    clip-path: inset(0% 0 0% 0)

  10%

    left: 1%

    clip-path: inset(21% 0 5% 0)

  19%

    left: 1%

    clip-path: inset(21% 0 5% 0)

  20%

    left: 6%

    clip-path: inset(72% 0 55% 0)

  29%

    left: 6%

    clip-path: inset(72% 0 55% 0)

  30%

    left: 0

    clip-path: inset(12% 0 -52% 0)

  39%

    left: 0

    clip-path: inset(12% 0 -52% 0)

  40%

    left: -5%

    clip-path: inset(-80% 0 12% 0)

  49%

    left: -5%

    clip-path: inset(-80% 0 12% 0)

  50%

    left: 0

    clip-path: inset(95% 0 32% 0)

  59%

    left: 0

    clip-path: inset(95% 0 32% 0)

  60%

    left: 2%

    clip-path: inset(4% 0 27% 0)

  69%

    left: 2%

    clip-path: inset(4% 0 27% 0)

  70%

    left: 0

    clip-path: inset(-64% 0 -77% 0)

  79%

    left: 0

    clip-path: inset(-64% 0 -77% 0)

  80%

    left: -8%

    clip-path: inset(75% 0 -4% 0)

  89%

    left: -8%

    clip-path: inset(75% 0 -4% 0)

  90%

    left: 0

    clip-path: inset(-33% 0 96% 0)

  99%

    left: 0

    clip-path: inset(-33% 0 96% 0)

  100%

    left: 3%

    clip-path: inset(48% 0 50% 0)
  
@keyframes glitchBlue
  
  0%
  
    left: 0

    clip-path: inset(0% 0 0% 0)

  9%
  
    left: 0

    clip-path: inset(0% 0 0% 0)

  10%

      left: -2%

      clip-path: inset(41% 0 -15% 0)

  19%

      left: -2%

      clip-path: inset(41% 0 -15% 0)

  20%

      left: -4%

      clip-path: inset(-72% 0 75% 0)

  29%

      left: -4%

      clip-path: inset(-72% 0 75% 0)

  30%

      left: 0

      clip-path: inset(62% 0 4% 0)

  39%

      left: 0

      clip-path: inset(62% 0 4% 0)

  40%

      left: 7%

      clip-path: inset(80% 0 -12% 0)

  49%

      left: 7%

      clip-path: inset(80% 0 -12% 0)

  50%

      left: 0

      clip-path: inset(5% 0 55% 0)

  59%

      left: 0

      clip-path: inset(5% 0 55% 0)

  60%

      left: -5%

      clip-path: inset(-47% 0 36% 0)

  69%

      left: -5%

      clip-path: inset(-47% 0 36% 0)

  70%

      left: 0

      clip-path: inset(24% 0 -7% 0)

  79%

      left: 0

      clip-path: inset(24% 0 -7% 0)

  80%

      left: 5%

      clip-path: inset(-75% 0 4% 0)

  89%

      left: 5%

      clip-path: inset(-75% 0 4% 0)

  90%

      left: 0

      clip-path: inset(3% 0 -96% 0)

  99%

      left: 0

      clip-path: inset(3% 0 -96% 0)

  100%

      left: -3%

      clip-path: inset(98% 0 -50% 0)
  
@keyframes glitchGreen
  
  0%

    clip-path: inset(0% 0 0% 0)

  9%

    clip-path: inset(0% 0 0% 0)

  10%

    clip-path: inset(41% 0 -15% 0)

  19%

    clip-path: inset(41% 0 -15% 0)

  20%

    clip-path: inset(-72% 0 75% 0)

  29%

    clip-path: inset(-72% 0 75% 0)

  30%

    clip-path: inset(62% 0 4% 0)

  39%

    clip-path: inset(62% 0 4% 0)

  40%

    clip-path: inset(80% 0 -12% 0)

  49%

    clip-path: inset(80% 0 -12% 0)

  50%

    clip-path: inset(5% 0 55% 0)

  59%

    clip-path: inset(5% 0 55% 0)

  60%

    clip-path: inset(-47% 0 36% 0)

  69%

    clip-path: inset(-47% 0 36% 0)

  70%

    clip-path: inset(24% 0 -7% 0)

  79%

    clip-path: inset(24% 0 -7% 0)

  80%

    clip-path: inset(-75% 0 4% 0)

  89%

    clip-path: inset(-75% 0 4% 0)

  90%

    clip-path: inset(3% 0 -96% 0)

  99%

    clip-path: inset(3% 0 -96% 0)

  100%

    clip-path: inset(98% 0 -50% 0)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.