JSFiddle - React, Tailwind, and code Playground

by Per Ă…strand

HTML

<h1 class="circular circular-top"
  style="left: 0; top:100px; transform: rotate(-60deg)">Testing circular text</h1>
<h1 class="circular circular-bottom" 
  style="position: absolute;top: 100px;left:175px;transform: rotate(70deg)">
  Testing circular text
</h1>

CSS

.circular {
  font: 26px Monaco, MonoSpace;
  position: absolute;
}

.circular span {
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
}

.circular-top span {
  height: 200px;
  transform-origin: bottom center;
}

.circular-bottom span {
  padding-top: 180px;
  transform-origin: top center;
}

JavaScript

$(function() {
	$(".circular").each(function(index, el){ 
    var $el = $(el);
  	$el.html($el.text().replace(/(.{1})/g, '<span>$1</span>'));
    $el.find("span").each(function(index2, el2) {
    	$(el2).css("transform", "rotate(" + ($el.hasClass("circular-top") ? 6 : -6) * index2 + "deg)");
    });
  });
});