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}