Set text on a circle with CSS / SCSS

Example #

<h1>
  <span class="char">E</span>
  <span class="char">s</span>
  <span class="char">t</span>
  <span class="char">a</span>
  <span class="char">b</span>
  <!-- you get the idea -->
</h1>

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

.SCSS Simple #

@for $i from 1 through 100
  .char#{$i}
    +transform(rotate(($i*6)+deg))

.SCSS #

@mixin rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg) {
  $angle-per-char: $angle-span / $num-letters;
  @for $i from 1 through $num-letters {
    .char#{$i} {
      @include transform(rotate($angle-offset + $angle-per-char * $i))
    }
  }
}

.SASS #

=rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg)
  $angle-per-char: $angle-span / $num-letters;
  @for $i from 1 through $num-letters
    .char#{$i}
      +transform(rotate($angle-offset + $angle-per-char * $i))

Refrences #

https://css-tricks.com/set-text-on-a-circle/

https://gist.github.com/chriseppstein/8615d6dc847e10c72fe5