<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);
});