'Draw a circle percentage from bottom center to clockwise

I have a SVG element which looks like the image down below. Which values are needed if I'd like the dark circle path to begin in the middle of the lower part shown in the second image.

svg{
width: 45px;
}
  
   .circle-bg {
    fill: none;
    stroke: #dddddd;
    stroke-width: 4;
  }

  .circle {
    fill: none;
    stroke-width: 4;
    stroke-linecap: square;
    stroke: green;
  }
<svg viewBox="0 0 36 36">
      <path class="circle-bg" 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" />
      <path class="circle"
    stroke-dasharray="60, 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"
  />
    </svg>


<!--Tried with some other values-->
<svg viewBox="0 0 36 36">
      <path class="circle-bg" 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" />
      <path class="circle"
    stroke-dasharray="30, 100"
    d="M18 33
      a 15.9155 15.9155 0 0 0 0 31.831
      a 15.9155 15.9155 0 0 0 0 -31.831"
  />
    </svg>

Percentage Circles

enter image description here

htmlsvg


Solution 1:[1]

Just rotate the circle into whatever position you want it to start from.

svg{
width: 45px;
}
  
   .circle-bg {
    fill: none;
    stroke: #dddddd;
    stroke-width: 4;
  }

  .circle {
    fill: none;
    stroke-width: 4;
    stroke-linecap: square;
    stroke: green;
    transform: rotate(180deg);
    transform-origin: center;
    transform-box: fill-box;
  }
<svg viewBox="0 0 36 36">
      <path class="circle-bg" 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" />
      <path class="circle"
    stroke-dasharray="60, 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"
  />
    </svg>


<!--Tried with some other values-->
<svg viewBox="0 0 36 36">
      <path class="circle-bg" 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" />
      <path class="circle"
    stroke-dasharray="20, 140"
    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"
  />
    </svg>

Solution 2:[2]

You can replace the <path> with a <circle>. The circle can also be rotated and have the pathLength attribute just like the path.

svg {
  width: 45px;
}

.circle-bg {
  fill: none;
  stroke: #dddddd;
  stroke-width: 4;
}

.circle {
  fill: none;
  stroke-width: 4;
  stroke: green;
  transform: rotate(-90deg);
  transform-origin: center;
}

text {
  font-size: 10px;
  font-family: sans-serif;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: middle;
}
<svg viewBox="0 0 36 36">
  <circle cx="18" cy="18" r="16" class="circle-bg" />
  <circle cx="18" cy="18" r="16" class="circle"
    pathLength="100" stroke-dasharray="60 100"/>
  <text x="18" y="18">60%</text>
</svg>


<!--Tried with some other values-->
<svg viewBox="0 0 36 36">
  <circle cx="18" cy="18" r="16" class="circle-bg" />
  <circle cx="18" cy="18" r="16" class="circle"
    pathLength="100" stroke-dasharray="30 100"/>
  <text x="18" y="18">30%</text>
</svg>

Solution 3:[3]

Built your own <progress-circle> native JS Web Component, supported in all modern browsers.

For your use-case it needs some extra 180deg rotations:

<b>Standard/Native Web Component support in Frameworks:</b><br>
<progress-circle value="100%">No FrameWork</progress-circle>
<progress-circle value="71%" stroke="red" color="red">React</progress-circle>
<progress-circle value="100%">Others</progress-circle>


<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>

<style>
  progress-circle {
    font-family: Arial;
    width: 120px; /* StackOverflow viewport */
  }
  
  progress-circle::part(slice0),
  progress-circle::part(slice1),
  progress-circle::part(slice2),
  progress-circle::part(text) {
    transform-origin: center;
    transform: rotate(180deg);
  }
</style>

<progress-circle> Web Component building instructions with unlicensed source-code:
DEV.to Post: What web technologies are required to draw a pie chart in 2021
(spoiler alert a standard web component will do)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 chrwahl
Solution 3

Related Questions