<h2 data-splitting>I am animating</h2>
<h2 data-splitting>I am animating</h2>

@import url("https://fonts.googleapis.com/css?family=Inconsolata:700");

* {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	background-color: black;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	color: coral;
}

h2 {
	font-family: Inconsolata, monospace;
	font-size: 1.8rem;
	text-transform: uppercase;
	width: 515px;
	height: 168px;
}

.char {
	// --i: calc(50% / var(--char-total));
	--offset: calc(var(--char-index) * 2rem);
	offset-path: path('M.4 84.1s127.4 188 267.7 0 247.3 0 247.3 0');
	offset-distance: var(--offset);
	position: absolute;
	animation: move 1500ms infinite alternate forwards var(--delay, 0ms);
}

h2 {
	&:nth-child(2) {
		color: aquamarine;
		
		.char {
			--delay: calc(var(--char-index) * 30ms);
		}
	}
}

@keyframes move {
	100% {
		// --i: 2rem;
		offset-distance: calc(var(--offset) + 12rem);
	}
}

Splitting({
	whitespace: true
})