<h1 data-heading="XYZ"><span contenteditable data-heading="XYZ">XYZ</span></h1>

$stripe1: white;
$stripe2: black;

html, body {
  background: black;
  background: repeating-linear-gradient(
  45deg,
  rgba(0, 0, 0, 1),
  rgba(0, 0, 0, 1) 10px,
  rgba(255, 255,255, 1) 10px,
  rgba(255, 255, 255, 1) 20px
);
  width: 100%;
  height: 100%;
}

h1 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 18vw;
  text-align: center;
  line-height: 1;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  color: white;
  white-space: nowrap;
  text-shadow: -10px 10px 0 black, 5px -5px 0 black, -5px 5px 0 black, 5px 5px 0 black;
  
  &:before,
  &:after, 
  span:before, 
  span:after {
    content: attr(data-heading);
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
  }
  
  &:before {
    color: $stripe1;
    height: 34%;
    z-index: 5;
    
  }
  
  &:after {
    color: $stripe2;
    height: 50%;
    z-index: 4;
    text-shadow: -5px -5px 0 black, 5px -5px 0 black, -5px 5px 0 black, 5px 5px 0 black;
    transform: translate(10px, 0);

  }
  
  span {
    
    &:before {
      color: $stripe1;
      height: 69%;
      z-index: 3;
      text-shadow: -5px -5px 0 black, 5px -5px 0 black, -5px 5px 0 black, 5px 5px 0 black;
    }
    
    &:after {
      color: $stripe2;
      height: 82%;
      z-index: 2;
      text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
      transform: translate(-5px, 0);

    }
  }
}

// JS for content editable trick from Chris Coyier
var span = document.querySelector("span");

span.addEventListener("input", function() {
  var text = this.innerText;
  this.setAttribute("data-heading", text);
  this.parentElement.setAttribute("data-heading", text);
});