Arrange text radially in a radial menu

Question

I have a code for a radial menu with elements. The code works for me, but I don’t understand how to add text (labels for the menu items) to it. I want the text to be arranged radially as well, preferably with some curvature. However, everything I’ve found so far either places text along the length of the label elements or creates SVG radial text that is non-segmented (rotating text around the circle). Below, I’ve attached an image of how I would like it to look.

How it looks now: How I want it to look:

Here is the code:

#F {
  transform: translate(0%, 2%);
}

#M1 {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#border {
  transform: translate(0%, -2%);
}

body.no-scroll {
  overflow: hidden;
}

.menu-open-button {
  background: rgba(255, 255, 255, 0.65);
  border-radius: 100%;
  border: 1vh solid #9D9E99;
  width: 10vh;
  height: 10vh;
  left: 50%;
  top: 84vh;
  position: fixed;
  color: #FFFFFF;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-open-button:hover {
  transition: 0.5s ease-in-out;
  background: #379;
  border: 1vh solid #FFFFFF;
}

.menu-open-button:hover .lines {
  transition: 0.5s ease-in-out;
  background: #fff;
}

.menu-open {
  display: none;
}

.lines {
  width: 5vh;
  height: 0.7vh;
  background: #9D9E99;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -2.4vh;
  margin-top: -0.3vh;
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}

.line-1 {
  -webkit-transform: translate3d(0, -1.7vh, 0);
  transform: translate3d(0, -1.7vh, 0);
}

.line-2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.line-3 {
  -webkit-transform: translate3d(0, 1.7vh, 0);
  transform: translate3d(0, 1.7vh, 0);
}

.menu-open:checked+.menu-open-button .line-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked+.menu-open-button .line-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked+.menu-open-button .line-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu-open-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked+.menu-open-button {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(-58%, 0, 0);
  transform: scale(0.8, 0.8) translate3d(-58%, 0, 0);
  border-color: transparent;
}

.cssplay-menu {
  position: fixed;
  left: 50%;
  top: 50vh;
  width: 40vh;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateX(-50%);
  z-index: 1;
}

#menu-open:checked~#M1 {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease 0.5s;
}

.cssplay-menu .holder {
  position: relative;
  padding-bottom: 100%;
  max-width: 100vh;
  overflow: hidden;
  --mask: radial-gradient(#0000 34.65%, #ffff 34.95% 67.5%, #0000 67.8% 69.5%, #ffff 69.7%);
  -webkit-mask: var(--mask) no-repeat;
  mask: var(--mask) no-repeat;
  mask-position: 0 20vh;
  mask-size: 100% auto;
}

.cssplay-menu input {
  position: absolute;
  display: none;
}

.cssplay-menu .segment {
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 100%;
  margin-left: -48%;
  margin-top: -48%;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(0);
  transition: 0.5s cubic-bezier(.58, 2.4, 0.5, 0.5);
  transition: 0.5s ease;
}

.menu-open:checked~.segment {
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.cssplay-menu .curve-upper {
  position: absolute;
  left: 1%;
  top: 1%;
  width: 98%;
  height: 98%;
  background: #fff;
  border-radius: 50%;
  transform: scale(0);
  transition: 0s;
}

.cssplay-menu .curve-lower {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(-240deg) scale(0);
  transition: 0s;
}

.cssplay-menu .curve {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: #8b0000;
  transform-origin: left top;
  transform: rotate(0deg) skewY(60deg);
}

.cssplay-menu .segment label {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  background: #389;
  border: 1px solid #fff;
  cursor: pointer;
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0, 0, 1, 1);
  transition: 0.25s ease;
}

.cssplay-menu .segment label span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 15px;
  bottom: 25px;
  margin: auto;
  width: 35px;
  height: 35px;
  background-position: center center;
  background-repeat: no-repeat;
}

.cssplay-menu .segment label:nth-of-type(1) {
  transform: rotate(-230deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(2) {
  transform: rotate(-200deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(3) {
  transform: rotate(-170deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(4) {
  transform: rotate(-140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(5) {
  transform: rotate(-110deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(6) {
  transform: rotate(-90deg) skewY(60deg);
}

.cssplay-menu .segment label:nth-of-type(7) {
  transform: rotate(100deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(8) {
  transform: rotate(140deg) skewY(50deg);
}

.cssplay-menu .segment label:nth-of-type(9) {
  transform: rotate(180deg) skewY(50deg);
}

.cssplay-menu .center {
  display: block;
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  margin-left: -20%;
  margin-top: -20%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: #8b0000;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 2px #fff;
}

.menu-open:checked~.cssplay-menu .holder .segment {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1);
}

.menu-open:checked~.cssplay-menu .holder .center {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 0.5s ease;
  transform: scale(1.2);
}

.menu-open:checked~.cssplay-menu .holder .curve-upper {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: scale(1);
}

.menu-open:checked~.cssplay-menu .holder .curve-lower {
  transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
  transition: 1s ease;
  transform: rotate(-240deg) scale(1);
}

.cssplay-menu #c1:checked~.holder .segment label:nth-of-type(1),
.cssplay-menu #c2:checked~.holder .segment label:nth-of-type(2),
.cssplay-menu #c3:checked~.holder .segment label:nth-of-type(3),
.cssplay-menu #c4:checked~.holder .segment label:nth-of-type(4),
.cssplay-menu #c5:checked~.holder .segment label:nth-of-type(5),
.cssplay-menu #c6:checked~.holder .segment label:nth-of-type(6),
.cssplay-menu #c7:checked~.holder .segment label:nth-of-type(7),
.cssplay-menu #c8:checked~.holder .segment label:nth-of-type(8),
.cssplay-menu #c9:checked~.holder .segment label:nth-of-type(9) {
  background: #22c3e3;
}

.menu-open:checked~.cssplay-menu #c2:checked~#toggle:checked~.holder .curve-lower {
  transform: rotate(-210deg)
}

.menu-open:checked~.cssplay-menu #c3:checked~.holder .curve-lower {
  transform: rotate(-180deg)
}

.menu-open:checked~.cssplay-menu #c4:checked~.holder .curve-lower {
  transform: rotate(-150deg)
}

.menu-open:checked~.cssplay-menu #c5:checked~.holder .curve-lower {
  transform: rotate(-120deg)
}

<html>

<head>
  <title>Techonology</title>
  <meta charset="utf-8">
</head>

<body class="no-scroll" id="TL" style="">
  <div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #379;">
    <div id="M0" style="width: 100vw; height: 100vh;">
      <div>
        <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"></input>
        <label class="menu-open-button" for="menu-open">
        <span class="lines line-1"></span>
        <span class="lines line-2"></span>
        <span class="lines line-3"></span>
    </label>
        <div class="cssplay-menu">
          <div>
            <input type="radio" id="c1" name="segment" checked="checked">
            <input type="radio" id="c2" name="segment">
            <input type="radio" id="c3" name="segment">
            <input type="radio" id="c4" name="segment">
            <input type="radio" id="c5" name="segment">
            <input type="checkbox" id="c6" onclick="checkConditions()">
            <input type="checkbox" id="toggle" checked="checked">
            <div class="holder">
              <div class="segment">
                <label for="c1"><span></span></label>
                <label for="c2"><span></span></label>
                <label for="c3"><span></span></label>
                <label for="c4"><span></span></label>
                <label for="c5"><span></span></label>
                <label for="c6"><span></span></label>
              </div>
              <div class="curve-lower">
                <div class="curve"></div>
              </div>
            </div>
          </div>
        </div>
        <svg id="M1" class="page_1" version="1.1" height="100vh" width="100vw" viewBox="0 0 1280 960">
        <g id="F">
                <g id="border">
                    <path d="M1 1 l0 950 l2 -2 l0 -946 l1270 0 l2 -2 Z" fill="#9DAACA" id="3DB"></path>
                    <path d="M1275 951 l0 -950 l-2 2 l0 946 l-1270 0 l-2 2 Z" fill="#6A7489" id="3DS"></path>
                </g>
        </g>        
 </svg>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

Build the whole thing in SVG, using a vector graphics editor (my favourite is Boxy SVG).

svg {
  width: 300px;
}

svg path {
  stroke-width: 1;
  stroke: white;
  fill: olivedrab;
  transition: 0.5s;
}

svg a:hover path {
  fill: blue;
}

svg text {
  pointer-events: none;
  fill: white;
  font-family: cursive;
  font-size: 28px;
  transform-origin: 250px 250px;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 250">
  <defs>
    <path id="path-0" d="M 460 250 A 210 210 0 0 1 250 460 A 210 210 0 0 1 40 250 A 210 210 0 0 1 250 40 A 210 210 0 0 1 460 250 Z" style="fill: none;"></path>
  </defs>
  <a href="#link1">
  <path d="M 100 250 L 0 250 C 0 204.366 12.227 161.588 33.5 125 L 120 175 C 106.727 197.624 100.294 221.873 100 250 Z"></path>
  </a>
  <a href="#link2">
  <path d="M 120.102 175.052 L 33.5 125.053 C 56.317 85.533 88.295 54.599 125.012 33.55 L 174.923 120.1 C 152.116 133.057 134.42 150.841 120.102 175.052 Z"></path>
  </a>
  <a href="#link3">
  <path d="M 175 120.102 L 125 33.5 C 164.52 10.683 207.68 -0.117 250.002 0.012 L 249.951 99.923 C 223.722 99.74 199.506 106.293 175 120.102 Z"></path>
  </a>
  <a href="#link4">
  <path d="M 250 99.978 L 250 -0.022 C 295.634 -0.022 338.412 12.205 375 33.478 L 325 119.978 C 302.376 106.705 278.127 100.272 250 99.978 Z"></path>
  </a>
  <a href="#link5">
  <path d="M 324.947 120.08 L 374.947 33.478 C 414.467 56.295 445.4 88.273 466.45 124.99 L 379.899 174.901 C 366.943 152.094 349.159 134.398 324.947 120.08 Z"></path>
  </a>
  <a href="#link6">
  <path d="M 379.897 174.978 L 466.5 124.978 C 489.317 164.498 500.117 207.658 499.988 249.981 L 400.076 249.929 C 400.26 223.701 393.706 199.484 379.897 174.978 Z"></path>
  </a>
  <text transform="rotate(-178)"><textPath href="#path-0">Option1</textPath></text>
  <text transform="rotate(-148)"><textPath href="#path-0">Option2</textPath></text>
  <text transform="rotate(-118)"><textPath href="#path-0">Option3</textPath></text>
  <text transform="rotate(-88)"><textPath href="#path-0">Option4</textPath></text>
  <text transform="rotate(-58)"><textPath href="#path-0">Option5</textPath></text>
  <text transform="rotate(-28)"><textPath href="#path-0">Option6</textPath></text>
</svg>