Как сделать диаграмму полукругом с помощью svg?

Question

Подскажите как сделать диаграмму полукругом с помощью svg что-бы можно было регулировать выводимое значения, или может есть другие варианты? Если нарисовать только закрашенную дугу то все работает, но как только вставляю серую область то она перекрывает эту закрашенную дугу(в примере вылазит маленький кусочек синего цвета снизу слева). Пример где только закрашенная дуга и все работает https://codepen.io/ladyelizaveta/pen/WNaJEXX, но нужна еще и серая полоска

const arc = document.querySelector('.arc');
// 0.5 - значение дуги
arc.style.strokeDasharray = 25 * Math.PI * 0.5 + ' 100';

.chart {
    fill: rgb(147, 155, 169, 0.15);
    stroke-width: 5;
    stroke-linecap: round;
}

.arc {
    stroke: #6170ef;
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
}

<svg width="148" height="121" viewBox="0 0 148 121">
  <mask id="mask0_907_26147" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="14" y="14" width="129" height="80">
    <path d="M23.22 93.1909C19.8152 94.1032 16.2818 92.0844 15.7134 88.6056C14.5042 81.2055 14.6037 73.6332 16.0245 66.237C17.8476 56.7465 21.7986 47.7927 27.5804 40.049C33.3623 32.3054 40.8246 25.9733 49.4061 21.529C57.9876 17.0847 67.4651 14.6438 77.1258 14.3899C86.7866 14.1359 96.3792 16.0755 105.182 20.0629C113.986 24.0502 121.77 29.9815 127.951 37.4107C134.132 44.8399 138.547 53.5738 140.867 62.9555C142.674 70.2668 143.171 77.8233 142.352 85.2768C141.968 88.7807 138.545 90.9823 135.097 90.2501C131.649 89.5179 129.49 86.127 129.787 82.6147C130.258 77.0623 129.819 71.4558 128.475 66.0187C126.619 58.5103 123.085 51.5203 118.138 45.5745C113.191 39.6287 106.961 34.8817 99.9157 31.6906C92.8702 28.4994 85.193 26.947 77.4613 27.1503C69.7295 27.3535 62.1444 29.307 55.2764 32.8639C48.4083 36.4208 42.4361 41.4886 37.8087 47.686C33.1813 53.8835 30.0192 61.0495 28.5602 68.645C27.5036 74.1452 27.36 79.7671 28.1213 85.2871C28.6029 88.7789 26.6248 92.2786 23.22 93.1909Z" fill="#F3ECE0" />
  </mask>
  <g mask="url(#mask0_907_26147)">

    <path class="arc" d="M9.5 13.9846H75.1736C82.0461 13.9846 85.3597 22.4067 80.3298 27.0897C80.0582 27.3427 79.8055 27.6152 79.5738 27.9053L14.4945 109.379L9.5 13.9846Z" fill="#6170EF" />
    <path class="chart" d="M23.22 93.1909C19.8152 94.1032 16.2818 92.0844 15.7134 88.6056C14.5042 81.2055 14.6037 73.6332 16.0245 66.237C17.8476 56.7465 21.7986 47.7927 27.5804 40.049C33.3623 32.3054 40.8246 25.9733 49.4061 21.529C57.9876 17.0847 67.4651 14.6438 77.1258 14.3899C86.7866 14.1359 96.3792 16.0755 105.182 20.0629C113.986 24.0502 121.77 29.9815 127.951 37.4107C134.132 44.8399 138.547 53.5738 140.867 62.9555C142.674 70.2668 143.171 77.8234 142.352 85.2768C141.968 88.7807 138.545 90.9823 135.097 90.2501C131.649 89.5179 129.49 86.127 129.787 82.6147C130.258 77.0623 129.819 71.4558 128.475 66.0187C126.619 58.5103 123.085 51.5203 118.138 45.5745C113.191 39.6287 106.961 34.8817 99.9157 31.6906C92.8702 28.4994 85.193 26.947 77.4613 27.1503C69.7295 27.3535 62.1444 29.307 55.2764 32.8639C48.4083 36.4208 42.4361 41.4886 37.8087 47.686C33.1813 53.8835 30.0192 61.0495 28.5602 68.645C27.5036 74.1452 27.36 79.7671 28.1213 85.2871C28.6029 88.7789 26.6248 92.2786 23.22 93.1909Z" />
  </g>
</svg>

БЛОГ НА HUSL

Как сделать диаграмму полукругом с помощью svg?

Ответы (0 шт):