<h1 data-splitting>Text in a circle with motion path</h1>

* {
	box-sizing: border-box;
}

body {
	font-family: 'Helvetica', sans-serif;
}

h1 {
	position: relative;
	width: 451px;
	height: 451px;
	margin: 1rem auto;
	text-transform: uppercase;
	background: radial-gradient(orchid, slateBlue);
	color: white;
	border-radius: 50%;
}

.char {
	--i: calc(100% / (var(--char-total) + 1));
	position: absolute;
	offset-path: path('M225.5.5c124.3 0 225 100.7 225 225s-100.7 225-225 225S.5 349.8.5 225.5 101.2.5 225.5.5');
	offset-distance: calc(var(--i) * var(--char-index));
/* 	offset-anchor: top; FF only */
	padding-top: 4rem;
}

Splitting({
	whitespace: true
})