I want to develop the arc based score bar like this below. Need to add the gradient colors

Question

**I have developed arc based score bar using svg. So, all looks good so far but I want to add gradient color to the arc. I tried adding using lineargradient but shape is collapsing. This is not related to the circle question. It's arc based one. please have a look of attached picture. **

.progress-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

path {
  stroke-linecap: round;
  stroke-width: 6;
}

.grey {
  stroke: #e5e5e5;
  stroke-width: 3px;
}

.green {
  stroke: limegreen;
  stroke-width: 9px;
  stroke-dasharray: 248;
  stroke-dashoffset: 240;
  /* adjust last number for variance */
  &.red-09 {
    stroke-dashoffset: 50;
  }
}

<div class="progress-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="green red-09" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
</div>

maybe something in [this previous question](https://stackoverflow.com/questions/14633363/can-i-apply-a-gradient-along-an-svg-path) will help — Jaromanda X, Aug 23 '23 at 03:56
@JaromandaX I dont think it can help me. Because I have almost completed mine but just need to add gradient to the arc that's it. — KRISH JACKMAN, Aug 23 '23 at 04:45
I just added linear gradient and changed the value of path and all. But it collapsed my shape. Finally below answer helped me a lot — KRISH JACKMAN, Aug 23 '23 at 06:56

score 0 · Accepted Answer · answered Aug 23 '23 at 05:12

There are a few different ways to do this but for your SVG it would probably be to use a linear gradient (tho this is not a perfect solution, since it's just a linear gradient from left to right and does not follow the arch) But I think it would be sufficient.

.progress-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

path {
  stroke-linecap: round;
  stroke-width: 6;
}

.grey {
  stroke: #e5e5e5;
  stroke-width: 3px;
}

.green {
  stroke: url(#arcGradient);
  stroke-width: 9px;
  stroke-dasharray: 248;
  stroke-dashoffset: 240;
  /* adjust last number for variance */
  &.red-09 {
    stroke-dashoffset: 50;
  }
}

<div class="progress-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <defs>
          <linearGradient id="arcGradient" gradientUnits="objectBoundingBox">
            <stop offset="0%" stop-color="red"/>
            <stop offset="20%" stop-color="darkorange"/>
            <stop offset="50%" stop-color="khaki"/>
            <stop offset="80%" stop-color="yellowgreen"/>
            <stop offset="100%" stop-color="limegreen"/>
          </linearGradient>
      </defs>
      <path class="grey" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
      <path class="green red-09" d="M55,90
               A55,55 0 1,1 140,90"
            style="fill:none;"/>
  </svg>
</div>

I am not sure how you want to control the length of the stroke-dashoffset. But maybe this would be wise to add either as a style, so you don't need many different classes for every length of the progress bar.

.progress-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

path {
  stroke-linecap: round;
  stroke-width: 6;
}

.grey {
  stroke: #e5e5e5;
  stroke-width: 3px;
}

.green {
  stroke: url(#arcGradient);
  stroke-width: 9px;
  stroke-dasharray: 248;
  stroke-dashoffset: 240;
}

<div class="progress-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="37 -5 120 100" width="120" height="100">
      <defs>
          <linearGradient id="arcGradient" gradientUnits="objectBoundingBox">
            <stop offset="0%" stop-color="red"/>
            <stop offset="20%" stop-color="darkorange"/>
            <stop offset="50%" stop-color="khaki"/>
            <stop offset="80%" stop-color="yellowgreen"/>
            <stop offset="100%" stop-color="limegreen"/>
          </linearGradient>
      </defs>
      <path class="grey" d="M55,90 A55,55 0 1,1 140,90" style="fill:none;"></path>
      <path class="green" d="M55,90 A55,55 0 1,1 140,90" style="fill:none; stroke-dashoffset: 50;"></path>
  </svg>
</div>

This way it's also a bit easier to update with, for example JS if this should reflect something the user is doing, client side. Hope this helps you out. Have a great day!

Thank you so much!!! you understand my requirement very well not like others. Others are always ready to close my question rather giving solution to this. But you did. Thanks — KRISH JACKMAN, Aug 23 '23 at 06:53
For an interactive Web Component see: https://stackoverflow.com/questions/76081842/how-to-change-the-color-of-the-circle-according-the-the-degree/76084858#76084858 — Danny '365CSI' Engelman, Aug 23 '23 at 11:00

I want to develop the arc based score bar like this below. Need to add the gradient colors

1 Answers1