text-rings.html
1<h1
2  class="ring"
3  style="--char-count: 39; --font-size: 2; --character-width: 1.2;"
4>
5  <span aria-hidden="true" class="char" style="--char-index: 0;">M</span>
6  <span aria-hidden="true" class="char " style="--char-index: 1;">a</span>
7  <span aria-hidden="true" class="char " style="--char-index: 2;">d</span>
8  <!-- Obfuschated -->
9  <span class="sr-only">Made by Jhey with CSS Trig functions • </span>
10</h1>
text-rings.css
1.ring {
2  --inner-angle: calc((360 / var(--char-count)) * 1deg);
3  --character-width: 1.2;
4  --radius: calc((var(--character-width) / sin(var(--inner-angle))) * -1ch);
5}
6.char {
7  transform: translate(-50%, -50%)
8    rotate(calc(var(--inner-angle) * var(--char-index)))
9    translateY(var(--radius));
10}