Круговая анимация css SVG

Question

Я хотел бы иметь возможность изменить этот код, чтобы получить 3 сегмента: первый из 15 градусов, второй из 35 и третий из 50 по часовой стрелке, но я не могу понять, какие параметры нужно изменить https://codepen.io/anon/pen/LKjBxm

const tl = new TimelineLite()

tl.from(".circle-1", 1, { attr:{ transform: "translate(-400, 0) rotate(0, 80, 80)" }, ease:Linear.easeNone})
  .from(".circle-4", 1, { attr:{ transform: "translate(200, 0) rotate(0, 80, 80)" }, ease:Linear.easeNone})
  .from(".circle-2", 1, { attr:{ transform: "translate(-200, 0) rotate(0, 80, 80)" }, ease:Linear.easeNone})
  .from(".circle-5", 1, { attr:{ transform: "translate(400, 0) rotate(0, 80, 80)" }, ease:Linear.easeNone})
  
  .add("end", 4)

  .to(".outline", 1, { opacity: 0 }, "end")
  .to(".circle-1", 1, { attr:{ transform: "translate(0, 0) rotate(-90, 80, 80)" }, ease:Linear.easeNone}, "end")
  .to(".circle-2", 1, { attr:{ transform: "translate(0, 0) rotate(44.87031700288185, 80, 80)" }, ease:Linear.easeNone}, "end")
  .to(".circle-4", 1, { attr:{ transform: "translate(0, 0) rotate(184.4092219020173, 80, 80)" }, ease:Linear.easeNone}, "end")
  .to(".circle-5", 1, { attr:{ transform: "translate(0, 0) rotate(236.28242074927954, 80, 80)" }, ease:Linear.easeNone}, "end")

document.querySelector("#replay").addEventListener("click", () => {
  tl.restart();
})

svg {
  display: block;
  margin: auto;
  width: 100%;
}
button { 
  cursor: pointer;
  display: block;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12px;
  margin: 2rem auto;
  padding: 5px 20px;
  text-transform: uppercase;
}

<div class="container">
  <svg height="160" viewbox="0 0 160 160">
    <g class="circle circle-1" transform="translate(-400, 0) rotate(-90, 80, 80)">
      <circle class="outline" cx="80" cy="80" fill="transparent" r="60" stroke="#eee" stroke-width="30"></circle>
      <circle cx="80" cy="80" fill="transparent" r="60" stroke="#6495ED" stroke-dasharray="374.99111843077515" stroke-dashoffset="300.75525273624842" stroke-width="30"></circle>
    </g>

    <g class="circle circle-2" transform="translate(-100, 0) rotate(54.87031700288185, 80, 80)">
      <circle class="outline" cx="80" cy="80" fill="transparent" r="60" stroke="#eee" stroke-width="30"></circle>
      <circle cx="80" cy="80" fill="transparent" r="60" stroke="goldenrod" stroke-dasharray="374.99111843077515" stroke-dashoffset="323.33602875017084" stroke-width="30"></circle>
    </g>

    <g class="circle circle-3" transform="rotate(100.75504322766571, 80, 80)">
      <circle class="outline" cx="80" cy="80" fill="transparent" r="60" stroke="#eee" stroke-width="30"></circle>
      <circle  cx="80" cy="80" fill="transparent" r="60" stroke="#cd5c5c" stroke-dasharray="374.99111843077515" stroke-dashoffset="204.52140860434986" stroke-width="30"></circle>
    </g>

    
  </svg>
  <button id="replay">Replay</button> 
</div>