CODEWITHSUNDEEP
svgstroke
user2198188
user2198188

Reputation: 53

How to set different colors in different parts of stroke in html SVG

How can I achieve something like this using SVG?

Required output

Upvotes: 2

Views: 2682

Answers (1)

methodofaction
methodofaction

Reputation: 72405

You would need two different circle elements, one for the underlying gray color and the other for the blue stroke, then apply a stroke-dasharray and stroke-dashoffset to the blue stroke. 

 .track,
.filled {
  stroke-width: 10;
  fill: none;
}

.track {
  stroke: #eee;
}

.filled {
  stroke: blue;
  stroke-dashoffset: 110;
  stroke-dasharray: 440;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 190">
  <circle class="track" cx="80" cy="80" r="70" />
  <circle class="filled" cx="80" cy="80" r="70" />
</svg>

Upvotes: 5

Related Questions