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

Let me know what you think on twitter @rdallaire

← Return to blog