<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;
	padding-top: 1rem;
}
Splitting({
	whitespace: true
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/splitting@1.0.6/dist/splitting.min.js