How to make padding, on the other hand, svg?

Question

css

How to make it so that this semicircle is filled on the other side?


To see how it is filled now: you need to twitch the first value of the strokeDasharray of the .chart class.


I want it to be filled from left to right, and not the way it is now - how can I do that?

Answer 1

<svg viewBox="-500 -500 1000 1000">
  <circle r="440" class='bg'  />
  <circle r="440" class="chart" id="bg" />
</svg>

<input id="range" type="range" min="0" max="1253.811865" value="0">

svg{
  display: block;
  transform: scaleX(-1)rotate(30deg);
  max-width: 350px;
}

circle {
   stroke-width: 40;
        stroke-linecap: round;
        transform-box: fill-box;
        transform-origin: center;
  fill:none;
}
.chart{
  stroke-dasharray: 0 2763.911865234375;
     stroke: #FF9900;
}
.bg{
  stroke-dasharray: 1253.811865 2763.911865234375;
  stroke: #FFFF;
}

body{
  background-color: black
}

range.addEventListener("input", function (){
    bg.style.strokeDasharray =  `${this.value}, 2763.911865234375`; 
  })

this is demo: https://codepen.io/topicstarter/pen/eYRwRQz