<div id="wrapper">
   <div id="text" class="channel-split-wrapper">
      RGB
   </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Poppins:900&display=swap');

body {
   font-family: 'Poppins', sans-serif;
   background-color: #000;
}

#wrapper {
   height: 100vh;
   display: flex;
   justify-content: center;   
   align-items: center;
}

.channel-split-wrapper {
   position: relative;
   font-size: 64px;
}

.channel-split-static {
   opacity: 0;
}

.channel-split {
   position: absolute;
   top: 0;
   left: 0;
   mix-blend-mode: difference;   
}

.channel-split-red {
   color: #f00;
   animation: ANIMATE-RED 2000ms infinite;
}

.channel-split-green {
   color: #0f0;
}

.channel-split-blue {
   color: #00f;
   animation: ANIMATE-BLUE 2000ms infinite;
}

@keyframes ANIMATE-RED {
   0% {
      transform: translate(0, 0)
   }
   50% {
      transform: translate(5px, 5px)
   }
   100% {
      transform: translate(0, 0)
   }
}

@keyframes ANIMATE-BLUE {
   0% {
      transform: translate(0, 0)
   }
   50% {
      transform: translate(-5px, -5px)
   }
   100% {
      transform: translate(0, 0)
   }
}
function channelSplit(elem) {
   if (elem) {
      const inner = elem.innerHTML;
      elem.innerHTML = "";
      
      const spanHidden = document.createElement("span");
      spanHidden.classList.add("channel-split-static");
      spanHidden.innerHTML = inner;
      elem.appendChild(spanHidden);
      
      ["red", "green", "blue"].forEach(x => {
         const span = document.createElement("span");
         span.classList.add("channel-split");
         span.classList.add(`channel-split-${x}`);
         span.innerHTML = inner;
         elem.appendChild(span);
      });
   }
}

channelSplit(document.getElementById("text"));

External CSS

  1. https://fonts.googleapis.com/css?family=Source+Sans+Pro

External JavaScript

This Pen doesn't use any external JavaScript resources.