<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="blue-grad" x1="50%" y1="100%" x2="50%" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#3269bd"/>
      <stop offset="1" stop-color="#03c8f2"/>
    </linearGradient>
    <linearGradient id="red-grad" x1="50%" y1="100%" x2="50%" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fa5e5f"/>
      <stop offset="1" stop-color="#a01d1d"/>
    </linearGradient>
  </defs>
    <path class="parts blue-part" fill="none" stroke-linecap="round" stroke="url(#blue-grad)"/>
    <path class="parts red-part" fill="none" stroke-linecap="round" stroke="url(#red-grad)"/>
</svg>

<input id="ratio-range" type="range" min="5" max="80" step="1" value="40">

svg {
  margin: 20px;
  display: block;
  width: 200px;
  overflow: visible;
}

.parts {
  stroke-width: 4px;
}

const R = 50;
const gap = Math.PI / 18;
const bPart = document.querySelector('.blue-part');
const rPart = document.querySelector('.red-part');

const range = document.querySelector('#ratio-range');
range.addEventListener('input', updateRatio);

function updateRatio(event) {
  const bVal = +event.target.value;
  const rVal = 100 - bVal;
  
  const bStart = -Math.PI / 2 + gap / 2;
  const bAngle = Math.PI * 2 * bVal / 100 - gap;
  const bEnd = bStart + bAngle;
  
  const rStart = bEnd + gap;
  const rAngle = Math.PI * 2 * rVal / 100 - gap;
  const rEnd = rStart + rAngle;
  
  const bPath = 
    `M ${Math.cos(bStart) * R + R} ${Math.sin(bStart) * R + R}, ` +
    `A ${R} ${R} 0 ${bAngle > Math.PI ? 1 : 0} 1 ${Math.cos(bEnd) * R + R} ${Math.sin(bEnd) * R + R}`;
  bPart.setAttribute('d', bPath);
  
  const rPath = 
    `M ${Math.cos(rStart) * R + R} ${Math.sin(rStart) * R + R}, ` +
    `A ${R} ${R} 0 ${rAngle > Math.PI ? 1 : 0} 1 ${Math.cos(rEnd) * R + R} ${Math.sin(rEnd) * R + R}`;
  rPart.setAttribute('d', rPath);
}

range.dispatchEvent(new Event('input'));