Draw a circle percentage from bottom center to clockwise

user_15169443 0
Viewed 83

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

svg html
3 Answers

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>

user_10380150

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>

user_3220840

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)

user_25208000
Related