Facing issue in gauge Chart

[shahzadsiddiqui8]

I am trying to make a gauge chart using HTML and CSS but I am not able to curve this circle properly, I want to make the circle as image attached. your early help appreciated…

here is my fiddle : https://jsfiddle.net/shahzadsiddiqui8/Lwrnobv0/3/

<div class="sc-gauge">
                                        <div class="sc-background">
                                          <div class="sc-percentage"></div>
                                          <div class="sc-mask"></div>
                                          <span class="sc-value">88</span>
                                        </div>
                                        <span class="sc-min">0</span>
                                        <span class="sc-max">100</span>
                                    </div>

css:
.sc-gauge  { width:200px; height:200px; }
.sc-background { position:relative; height:100px; margin-bottom:10px; background-color:#ccc; border-radius:150px 150px 0 0; overflow:hidden; text-align:center; }
.sc-mask { position:absolute; top:20px; right:20px; left:20px; height:80px; background-color:#fff; border-radius:150px 150px 0 0 }
.sc-percentage { position:absolute; top:100px; left:-200%; width:400%; height:400%; margin-left:100px; background-color:#f96300; }
.sc-percentage { transform:rotate(158deg); transform-origin:top center; }
.sc-min { float:left; }
.sc-max { float:right; }
.sc-value { position:absolute; top:50%; left:0; width:100%;  font-size:48px; font-weight:700 }

[etidd]

Hey,

Your chart looks really awesome.
Do you still have the image to show us what you want it to look like?

[TechnoBear]

Threads merged.

[PaulOB]

I think you would be better using svg for the circles. I’m a complete amateur at drawing with svg but this was my attempt.

Hopefully it will be some use and you can tidy it up. There probably is a much easier way to do the whole thing in svg (including text etc) but I;ll leave that for you to explore