Как окрасить 70% stroke в #f3ca80, а 30% в #403f4e у circle. svg

К примеру у меня есть вот такая окружность

<div style="width: 100%; display: flex; justify-content: center"> 
  <svg width="500" height="500"> 
    <circle r="180" cx="232" cy="232" stroke-dasharray="2 3" stroke="#f3ca80" fill="none" stroke-width="30"></circle> 
  </svg> 
</div>

Сейчас все 100% окрашены в цвет #f3ca80

Я смог сделать вариант только с 50% процентами, вот он:

<div style="width: 100%; display: flex; justify-content: center"> 
  <svg width="500" height="500"> 
    <defs> 
      <mask id="mask" x="0" y="0" width="464" height="464" maskUnits="userSpaceOnUse"> 
        <circle r="180" cx="232" cy="232" stroke-dasharray="2 3" stroke="#fff" stroke-width="40"></circle> 
      </mask> 
    </defs> 
    <g mask="url(#mask)"> 
      <circle cx="232" cy="232" r="180" opacity="1" fill="#403f4e"></circle> 
      <path class="upgrade__circle-path" d="M0 180 A 100 100 1 0 0 0 -180 z" fill="#f3ca80"></path> 
    </g> 
  </svg> 
</div>

Цель:

Cоотношение должно меняться динамически и зависеть от одного (макс. двух) параметра(ов), параметр должно быть в % или чтобы его можно было в них перевести.

К примеру:

1. x = 26% значить соотношение будет 26% #f3ca80 и 64% #403f4e
2. x = 42%, y = 58% значить соотношение будет 42% #f3ca80 и 58% #403f4e

Для решение данной задачи можете использовать php, svg, html, css, js, ajax, jquery