Creating a responsive circular percentage chart with two percentages

Question

I am trying to build a circle like the one below with any two arbitrary percentage values.

Currently I have the circle below, but I am unsure on how to go about the gaps as my current approach is to create a full circle, and then add a path on top of it.

The code for my circle is:

 <svg viewBox="0 0 36 36" className="circular-chart orange">
        <path
          d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          
          a 15.9155 15.9155 0 0 1 0 -31.831"
          fill="none"
          strokeDashoffset="1"
          strokeDasharray="1000"
          strokeWidth="1.5"
          stroke="blue"
        />
        <path
          strokeDasharray="69, 100"
          d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
          fill="none"
          strokeWidth="1.5"
          stroke="red"
        />
      </svg>

Great. Any idea on how to controll the size of the inlay border? — Joachim Morken, Aug 04 '21 at 10:16
refer to the other answer I linked there to understand how the clip-path works — Temani Afif, Aug 04 '21 at 10:22

score 1 · Accepted Answer · answered Aug 04 '21 at 15:40

Add a pathLength of 100 so the whole circle is equal to 100 units and then tweak your stroke-dasharrays as appropriate.

 <svg width="400px" height="400px" viewBox="0 0 36 36" className="circular-chart orange">
    <path
      d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831"
      fill="none"
      stroke-dasharray="0 69 30.75 0.25"
      stroke-width="1.5"
      stroke="blue"
      pathLength="100"
    />
    <path
      stroke-dasharray="68.75, 31.25"
      d="M18 2.0845
      a 15.9155 15.9155 0 0 1 0 31.831
      a 15.9155 15.9155 0 0 1 0 -31.831"
      fill="none"
      stroke-width="1.5"
      stroke-dasharray="61 39"
      stroke="red"
      pathLength="100"
    />
  </svg>

score 0 · Answer 2 · answered Aug 05 '21 at 02:10

Maybe this is what you are looking for:

<svg viewBox="0 0 36 36" className="circular-chart orange">
<path d="M 33.915493,18 C 33.915493,26.789888 26.789894,33.9155 18,33.9155 9.2101061,33.9155 2.0845069,26.789888 2.0845069,18 2.0845069,9.2101123 9.2101061,2.0845 18,2.0845 26.789894,2.0845 33.915493,9.2101123 33.915493,18 Z" style="fill:none;stroke:#0000ff; stroke-width:1.5px;strokeDashoffset:1;strokeDasharray:1000"/>
<path d="M 10.760589,3.8225001 C 12.932326,2.7113308 15.39296,2.0845 18,2.0845 c 8.789894,0 15.915493,7.1256123 15.915493,15.9155 0,8.789888 -7.125599,15.9155 -15.915493,15.9155 -5.153422,0 -9.7347676,-2.449325 -12.643428,-6.24736" style="fill:none;stroke:#ff7700; stroke-width:1.5px;strokeDashoffset:1;strokeDasharray:69, 100"/>
</svg>

Creating a responsive circular percentage chart with two percentages

2 Answers2