JSFiddle - React, Tailwind, and code Playground

by kougiland

CSS

.semicircle {
    position: absolute;
}

JavaScript

var titles = [
    "title1",
    "title2",
    "title3",
    "title4",
    "title5",
    "title6",
    "title7",
    ];

var startAngle = Math.PI / titles.length,
    angle = startAngle / 2,
    radius = 100,
    offset = window.innerWidth / 2;

for ( var i = 0; i < titles.length; i++ ) {
    var span = document.createElement( "span" );
    span.className = "semicircle";
    span.innerHTML = titles[i];
    span.style.left = radius * Math.cos( angle ) + offset + "px";
    span.style.top = radius * Math.sin( angle ) + "px";
    document.body.appendChild( span );
    angle += startAngle;
}