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

* {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

:root {
	--size: 90vw;
}

h1 {
	// Fluid type sizing https://andy-bell.design/wrote/custom-property-controlled-fluid-type-sizing/:
	--fluid-type-min-size: calc(30 / var(--char-total)); // Because the variable is set with JS, it’s probably a good idea to provide a default value in the places we’re using it.
	--fluid-type-max-size: calc(60 / var(--char-total));
  --fluid-type-min-screen: 20;
  --fluid-type-max-screen: 60;

  font-size: calc(
    (var(--fluid-type-min-size) * 1rem) + (var(--fluid-type-max-size) - var(--fluid-type-min-size)) *
      (100vw - (var(--fluid-type-min-screen) * 1rem)) /
      (var(--fluid-type-max-screen) - var(--fluid-type-min-screen))
  );
	background: radial-gradient(orchid, slateBlue);
	color: white;
	letter-spacing: 1rem;
	width: var(--size);
	height: var(--size);
	max-width: 45rem;
	max-height: 45rem;
	position: relative;
	border-radius: 50%;
	text-transform: uppercase;
}

.char {
	--units: 1;
	--l: calc(var(--char-total) + 1);
	--rotationUnit: calc((1turn / var(--l)) * var(--char-index, 1));
	transform: rotate(var(--rotationUnit));
	transform-origin: center;
	width: calc(100% - 2rem);
	height: calc(100% - 2rem);
	top: 1rem;
	left: 1rem;
	text-align: center;
	// Required to override splitting.js styles
	display: block !important;
	position: absolute !important;
	
	&::before,
	&::after {
		display: none;
	}
}

const results = Splitting({ by: 'chars', whitespace: true })