- let text = 'We Love to Play';
- let arr = text.split('');

h1(role='img' aria-label=text)
	- arr.forEach(letter => {
		span.letter(class=Math.random() > .5 ? 'over' : null) #{letter}
	- });

$h: .125em;

body {
	display: grid;
	place-content: center;
	margin: 0;
	height: 100vh;
	background: url(https://images.unsplash.com/photo-1484313544071-4d67c88b99be?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 50%/ cover
}

h1 {
	position: relative;
	padding: 0 .5*$h;
	font: 900 9vw segoe script, purisa, comic sans ms, cursive;
	
	&::after {
		position: absolute;
		top: calc(50% - .5*#{$h}); right: 0;
		width: calc(50% + 50vw); height: $h;
		border-radius: 0 $h $h 0;
		background: crimson;
		content: ''
	}
}

.over {
	position: relative;
	z-index: 1
}