SVG gradient stroke

Question

I found this code

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="-1 -1 34 34">
  
  <circle cx="16" cy="16" r="15.9155" class="progress-bar__background" />
  
  <circle cx="16" cy="16" r="15.9155" class="progress-bar__progress js-progress-bar"/>
</svg>

$progress-bar-stroke-width: 1.8;
$progress-bar-size: 300px;

svg {
  height: $progress-bar-size;
  transform: rotate(-90deg);
  width: $progress-bar-size;
}

.progress-bar__background {
  fill: none;
  stroke: #e2eff0;
  stroke-width: $progress-bar-stroke-width;
}

.progress-bar__progress {
  fill: none;
  stroke: #78bec7;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  stroke-width: $progress-bar-stroke-width;
  transition: stroke-dashoffset 1s ease-in-out;
}

var percentageComplete = 0.6;
var strokeDashOffsetValue = 100 - (percentageComplete * 100);
var progressBar = $(".js-progress-bar");
progressBar.css("stroke-dashoffset", strokeDashOffsetValue);

But idk how to work with svg, can someone help me, how to replace that aqua color to gradient like conic-gradient(red, yellow, green - exactly these 3 colors)?

@RobertLongson I understand it, but there should be some ways how to create some gradient. — pumpk1n, Oct 15 '22 at 20:52
I’m not clear what effect you want. An example of using an svg linear gradient is given at https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke but is there something else you require? Perhaps a picture, can be a sketch, showing the effect would help us. — A Haworth, Oct 16 '22 at 06:25
@AHaworth that's right, but how to combine it correctly, cuz for me it come like full filled border — pumpk1n, Oct 16 '22 at 09:25
Does this answer your question? [Can I apply a gradient along an SVG path?](https://stackoverflow.com/questions/14633363/can-i-apply-a-gradient-along-an-svg-path) — Donald Duck, Oct 22 '22 at 16:32

score 1 · Answer 1 · answered Oct 17 '22 at 12:14

In SVG you can use <linearGradient> and <radialGradient>. You are creating a progress bar, so depending on the layout the radial gradient could be an option for creating a "conic gradient" (in quotation marks!), but it is really annoying to work with.

A good alternative to the build-in gradients could be combining SVG and CSS. You can apply CSS styles to an embedded SVG element. So long that you only need one conic gradient that can be applied to the SVG element and then masked off, so that it only shows in a stroke or whatever. Here is an example:

svg {
  display: block;
  background-image: conic-gradient(from 180deg, green, orange, red);
}

<svg width="300" xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100">
  <defs>
    <mask id="m1">
      <rect width="100" height="100" fill="white" />
      <circle transform="rotate(120 50 50)" cx="50"
        cy="50" r="45" stroke="black" stroke-width="5"
        fill="none" stroke-dasharray="300 360" pathLength="360" />
    </mask>
  </defs>
  <rect width="100" height="100" fill="white" mask="url(#m1)" />
</svg>

SVG gradient stroke

1 Answers1