<div class="items">

  <div class="item">
    <div class="btn" data-rotate="266deg" data-dash="35" data-color="red">button</div>

    <div class="btn" data-rotate="243deg" data-dash="75" data-color="blue">button</div>

    <div class="btn" data-rotate="212.5deg" data-dash="100" data-color="green">button</div>

    <div class="btn" data-rotate="164.5deg" data-dash="160" data-color="yellow">button</div>

    <div class="btn" data-rotate="119.8deg" data-dash="150" data-color="pink">button</div>

    <div class="btn" data-rotate="54.5deg" data-dash="220" data-color="yellowgreen">button</div>

    <div class="btn" data-rotate="-28deg" data-dash="280" data-color="darkblue">button</div>

    <div class="btn" data-rotate="-81deg" data-dash="175" data-color="darkred">button</div>
  </div>

  <div class="item">
    <svg viewBox="-250 -250 500 500" width="250" xmlns="http://www.w3.org/2000/svg">

      <circle id="cursor" r="200" fill="none" stoke="darkred" stroke-width="70" stroke-dasharray="175 1256" transform="rotate(-81,0,0)" />
      <g>
        <circle r="200" fill="none" stroke="red" stroke-width="50" stroke-dasharray="35 1256" transform="rotate(266,0,0)" />

        <circle r="200" fill="none" stroke="blue" stroke-width="50" stroke-dasharray="75 1256" transform="rotate(243,0,0)" />

        <circle r="200" fill="none" stroke="green" stroke-width="50" stroke-dasharray="100 1256" transform="rotate(212.5,0,0)" />

        <circle r="200" fill="none" stroke="yellow" stroke-width="50" stroke-dasharray="160 1256" transform="rotate(164.5,0,0)" />

        <circle r="200" fill="none" stroke="pink" stroke-width="50" stroke-dasharray="150 1256" transform="rotate(119.8,0,0)" />

        <circle r="200" fill="none" stroke="yellowgreen" stroke-width="50" stroke-dasharray="220 1256" transform="rotate(54.5,0,0)" />

        <circle r="200" fill="none" stroke="darkblue" stroke-width="50" stroke-dasharray="280 1256" transform="rotate(-28,0,0)" />

        <circle r="200" fill="none" stroke="darkred" stroke-width="50" stroke-dasharray="175 1256" transform="rotate(-81,0,0)" />
      </g>
    </svg>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.items {
  display: flex;
  align-items: start;
  margin: auto;
  width: 400px;
}

.btn {
  width: 100px;
  height: 25px;
  background: linear-gradient(darkblue, blue);
  margin-top: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.24s;
  margin-left: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: sans-serif;
}

.btn:hover {
  transform: scale(1.15);
  background: linear-gradient(blue, darkblue);
  font-size: 14px;
}

svg {
  display: block;
  margin-left: 30px;
}

#cursor {
  transition: 0.24s linear;
}

document.querySelectorAll(".btn").forEach(function (el) {
  let rot = el.getAttribute("data-rotate");
  let dash = el.getAttribute("data-dash");
  let color = el.getAttribute("data-color");

  el.addEventListener("click", function () {
    cursor.style.transform = `rotate(${rot})`;
    cursor.style.strokeDasharray = `${dash} 1256`;
    cursor.style.stroke = color;
  });
});