Svg Circle File Stroke from Top in Anti Clockwise Direction on Windows

SVG circle stroke anticlockwise direction

Rotate the upper circle -90deg and use stroke-dasharray and stroke-dashoffset on the second circle.

.demo {  margin-top: 20px;  display: flex;  align-items: center;  justify-content: center;}
.progress-circle {  transform: rotate(-90deg);  transform-origin: center center;}
.progress__value {  stroke-dasharray: 360;  stroke-dashoffset: 90;}

<div class="demo">  <svg width="120" height="120" viewBox="0 0 120 120">    <g class="progress-circle">       <circle cx="60" cy="60" r="54" fill="none" stroke="#05c189"  stroke-width="12" />       <circle class=" progress__value" cx="60" cy="60" r="54" fill="none" stroke="#5c5c5c"  stroke-width="12" />    </g>    <g>       <text x="50%" y="50%" stroke="#5c5c5c" text-anchor="middle" stroke-width="0.5px" dy=".1em" style="font-size: 9px;text-align: center;overflow-wrap: break-word;" >2 Users</text>    </g>  </svg></div>

SVG Counterclockwise

UPDATE : the first answer seems to work only on chrome due to some browser compatibility, you can find below a more suitable answer

You may combine the use of rotation. So if you want -20% you make the stroke-dasharray="20, 100" and you apply a negative rotation calculated in this way = 20% of 360 degree which will be in this case -72. Then add to the animation rotate(0) to create the anti-clockwise movement:

.flex-wrapper {  display: flex;  flex-flow: row nowrap;}
.single-chart {  width: 33%;  justify-content: space-around;}
.circular-chart {  display: block;  margin: 10px auto;  max-width: 80%;  max-height: 250px;}
.circle-bg {  fill: none;  stroke: #eee;  stroke-width: 3.8;}
.circle {  fill: none;  stroke-width: 3.8;  stroke-linecap: square;  transform-origin:center;  animation: progress 1s ease-out forwards;}.circle-anti {  animation: antiprogress 1s ease-out forwards;}
@keyframes progress {  0% {    stroke-dasharray: 0 100;  }}
@keyframes antiprogress {  0% {    stroke-dasharray: 0 100;    transform: rotate(0deg);  }}
.circular-chart.orange .circle {  stroke: #f80;}
.circular-chart.green .circle {  stroke: #00c851;}
.circular-chart.blue .circle {  stroke: #33b5e5;}
.circular-chart.blue .red {  stroke: #ff3547;}
.percentage {  fill: #666;  font-family: sans-serif;  font-size: 0.5em;  text-anchor: middle;}

<div class="flex-wrapper">
  <div class="single-chart">    <svg viewbox="0 0 36 36" class="circular-chart orange">      <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 circle-anti"        stroke-dasharray="50, 100" style="transform:rotate(-180deg)"        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"      />      <text x="18" y="20.35" class="percentage">-50%</text>    </svg>  </div>
  <div class="single-chart">    <svg viewbox="0 0 36 36" class="circular-chart green">      <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"      />      <text x="18" y="20.35" class="percentage">60%</text>    </svg>  </div>     <div class="single-chart">    <svg viewbox="0 0 36 36" class="circular-chart green">      <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 style="transform:rotate(-72deg)" class="circle circle-anti"        stroke-dasharray="20, 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"      />      <text x="18" y="20.35" class="percentage">-20%</text>    </svg>  </div>
</div>

Space between SVG stroke and fill

I found that adding stroke-linecap="round" style="stroke-dasharray: 1000" fixes the issue by introducing virtual dashes

<svg viewBox="0 0 300 300">
  <circle cx="100" cy="100" r="8" 
    stroke="#000" stroke-width="40" 
    fill="#0F0" stroke-linecap="round" style="stroke-dasharray: 1000" />
</svg>

is it possible to make SVG circle fill color from bottom to top based on percentage?

you could use a gradient with stop-opacity to do this.
you would add two "middle" stops with opacity 0 and 1 respectively an set the offset of both to the percentage you need.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">  <linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">      <stop offset="0%" stop-opacity="1" stop-color="royalblue"/>      <stop offset="40%" stop-opacity="1" stop-color="royalblue"/>      <stop offset="40%" stop-opacity="0" stop-color="royalblue"/>      <stop offset="100%" stop-opacity="0" stop-color="royalblue"/>  </linearGradient>  <circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/></svg>

How to draw donut chart in sketch app, which generates correct SVG code

There are two ways that I would suggest building this, and neither rely on rotate transforms. Transforms (especially when exported from design tools alongside other attributes like stroke-dasharray or masks) can cause issues.

Approach 1:

If this is intended to be a static graphic that doesn't need to change, you could simply take this approach in Sketch:

• Create 3 identical circle layers, with yellow, green, and blue borders.

• For each circle, use the Scissors tool to remove line segments from the circle.* For example, for the blue layer, you'd use the Scissors tool to remove all but one of its line segments. I also wrote an article about how to use the Scissors tool.

• Note that this approach doesn't use rotate transforms. It should export easily and identically from Sketch to SVG.

* A line segment is the path in between any two vector points, so if you wanted part of the circle to end at an arbitrary point (ex: 4 o'clock) where there isn't already a vector point you can just go into Edit mode and click along the path to add a vector point there.

Approach 2:

If this is intended to be a dynamic graphic that changes based on real data (like a pie chart), stroke dashes are a good idea but I would suggest doing some of the work directly in the SVG:

• Start in Sketch by creating that same circle layer (only one).

• This way of using stroke dashes relies heavily on 1. the start point of the circle, and 2. the path direction of the circle. We can figure those out in Sketch by entering Edit mode on the circle (return key); the selected vector point is the start point, and hitting the tab key will cycle through the other points moving in the direction of the path. Based on Sketch's defaults for a circle, we'll need to make the following adjustments to get a circle that starts at 12 o'clock and moves clockwise:

• Rotate the circle 180°, then click Flatten in the toolbar (or in the menu bar, via Layer > Combine > Flatten). In addition to removing the rotate transform, this turns it into a custom path instead of a standard circle. It will export to SVG as a <path> element instead of a <circle>.

• The path direction is currently counter-clockwise, so if you want it to be clockwise you should also go to Layer > Path > Reverse Order to switch the path direction. Now we have exactly the circle path that we want—no need for rotations in the SVG.

• After exporting to SVG, I suggest copying the code into a CodePen, as I've done here in this demo. To start, move the <path> element into the <defs> area so that you can easily clone it for each of the colored segments.

• Create 3 <use> elements that reference the <path>, each with their own stroke colors. See my CodePen link if you aren't familiar with how to do this.

• Add a stroke-dasharray attribute to each of the <use> elements. They should have 2 values: 1. the length of the segment you want to create, and 2. the length of the gap between dashes—which should be equal to or greater than the length of the path itself. In this case the path length is about 628, which can be calculated using the little bit of Javascript I included in that CodePen (open up the console to see the resulting number). In this example, the green and blue circles take up 1/4 of the circle path, so they should have a stroke-dasharray of 157, 628.

• Because these dashes all start at the beginning of the path, we need to offset them. We don't need to use a rotate transform for this—instead I suggest using stroke-dashoffset which was created for this exact reason. The offset takes one number value: the distance it moves the dashes in the opposite direction as the path. That means we need to use negative values to move in the same direction as the path. To offset the green segment by half of the circle, that attribute should be stroke-dashoffset="-314".

• The nice thing about this approach is that you could easily use Javascript or CSS calc() to easily set the stroke-dasharray and stroke-dashoffset values for these colorful segments, and update them based on new data.

Woohoo—dynamic charts!