JSFiddle - React, Tailwind, and code Playground

by brombomb

HTML

<div class="duration-picker">
  <svg viewBox="-200 -200 400 400" height="449" width="449">
    <circle cx="0" cy="0" r="90" />
    <g class="marks">
      <line x1="90" y1="0" x2="110" y2="0" />
      <line x1="90" y1="0" x2="110" y2="0" />
      <line x1="90" y1="0" x2="110" y2="0" />
      <line x1="90" y1="0" x2="110" y2="0" />
      <line x1="90" y1="0" x2="110" y2="0" />
      <line x1="90" y1="0" x2="110" y2="0" />
      <line x1="90" y1="0" x2="110" y2="0" />
    </g>
    <g class="times">
      <text x="56" y="-100">5</text>
      <text x="99" y="-54">10</text>
      <text x="115" y="4">15</text>
      <text x="99" y="62">20</text>
      <text x="-7" y="125">30</text>
      <text x="-130" y="4">45</text>
      <text x="-9" y="-115">60+</text>
    </g>
  </svg>

</div>

CSS

svg {
  width: 449px;
  height: 449px;
  fill: white;
  stroke: #c7c7c7;
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  border: 1px solid #f0f;
}

.marks {
  stroke-width: 2;
}
.marks > line:nth-child(1) {
  transform: rotate(00deg);
}
.marks > line:nth-child(2) {
  transform: rotate(calc(30deg));
}
.marks > line:nth-child(3) {
  transform: rotate(calc(60deg));
}
.marks > line:nth-child(4) {
  transform: rotate(calc(90deg));
}
.marks > line:nth-child(5) {
  transform: rotate(calc(120deg));
}
.marks > line:nth-child(6) {
  transform: rotate(calc(180deg));
}
.marks > line:nth-child(7) {
  transform: rotate(calc(270deg));
}

.times {
  transform: rotate(90deg);
  font-size: 14px;
  font-family: Avenir-Roman;
  stroke: none;
  fill: #4a4a4a;
}

.duration-picker {
  position: relative;
  height: 449px;
  width: 449px;
}

.duration-picker svg {
  height: 100%;
  width: 100%;
}


.duration-picker-overlay {
  background-color: #b3e9e9;
  border: 10px solid  #01b4b4;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: 51px;
}

/*.duration-picker-overlay::after*/
.marker{
  margin: 51px;
  height: 26px;
  width: 26px;
  background-color: #01b4b4;
  border-radius: 50%;
  position: absolute;
  top: -18px;
  left: calc(50% - 13px);
  z-index: 10;
}

.5 {
  clip-path: polygon(50% 0, 80% 0, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

/* clips generated here: https://bennettfeely.com/clippy/ */

/* 10 min
clip-path: polygon(50% 0, 100% 0, 100% 24%, 50% 50%, 50% 50%, 50% 50%);
*/

/* 15 min
clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%, 50% 50%, 50% 50%);
*/

/* 20 min
clip-path: polygon(50% 0, 100% 0, 100% 77%, 50% 50%, 50% 50%, 50% 50%);
*/

/* 30 min
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 50% 50%);
*/

/* 45 min
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%);
*/

/* 60 min
clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50%...