CODEWITHSUNDEEP
htmlsvg
krishna ganisetti
krishna ganisetti

Reputation: 54

SVG circle stroke anticlockwise direction

How to set svg circle stroke direction anti-clockwise starting at 270 degrees that means 12'O clock. it must be start from 12'o clock and if stroke array increases it will be increase anti-clock wise direction `

<svg width="100" height="76">
    <circle cy="38" cx="50" r="25" style="stroke-dasharray: 158;fill: none; stroke-width: 7; stroke: #5c5c5c; "></circle>					

	<circle cy="38" cx="50" r="25" style="stroke-dasharray:   52.666666666666664 158;fill: none; stroke-width: 7; stroke: #05c189;" transform="rotate(270 50 38)"  ></circle>
</svg>

`

Upvotes: 1

Views: 1818

Answers (1)

mahan
mahan

Reputation: 14935

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>

Use CSS @keyframes. At the moment, it animate 360 degrees. If it does not pass your requirement, change stroke-dasharray, stroke-dashoffset, and to {stroke-dashoffset: 360}

.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;
  animation: progress 2s infinite;
}

@keyframes progress {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 360;
  }
}
<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>

Check the code in full screen.

Upvotes: 1

Related Questions