SVG angular gradient

Question

Is there a way to do an 'angular gradient' in SVG?

(I don't know the official term -- it's the kind of gradient you see in color-pickers, where it varies by angle.)

SVG seems to support only linear and radial gradients, but I'm thinking there might be some way to use a transform to simulate what I want.

thanks!

I think you're describing a radial gradient with many colors. Can you show an image of what you're trying to create? — SLaks, Mar 17 '10 at 20:01

score 19 · Answer 1 · answered Feb 24 '20 at 05:45

19

...10 years later...

CSS now supports conical gradients, although browser support is mixed at the time of writing this.

You could apply a <clipPath /> to a <foreignObject /> whose contents use a CSS conical gradient to achieve the desired effect.

https://codepen.io/eastonium/pen/abOpdEm

answered Feb 24 '20 at 05:45

Eastonium

313
2
6

And adding a little link to the [CSS4](https://www.w3.org/TR/css-images-4/#conic-gradients) [conic-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient). – bufh Dec 28 '20 at 18:21

score 12 · Accepted Answer · edited Jul 29 '16 at 19:46

12

There's no standard support to do angular (conical) gradients.

But see http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient for some approximation methods (source code not included, though). Examples on that link do not work.

edited Jul 29 '16 at 19:46

xero

4,077
22
39

answered Mar 17 '10 at 20:16

kennytm

510,854
105
1,084
1,005

Good find. And one neat thing about SVG is that it *is* the source code. Like HTML, if you can see it, there's no way for the source code to *not* be included. :-) – Ken Mar 17 '10 at 20:28
Hi Ken, I dont know how could it help unless I have the source. I couldn't just hardcode the svg path in my page to generate gradient. e.g. I am looking for an angular gradient across a fill circled arc. – Tintin Jun 05 '14 at 00:07
@ken not always true... i've seem some programs that draw gigantic swabs all in single 10kb+ paths using the d attribute... Not so easy to read I might add. – Jack G May 20 '17 at 23:29

score 8 · Answer 3 · edited Sep 02 '19 at 23:37

Here is how to do it using patterns: https://jsfiddle.net/prozoroff/8eodzrke/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
    <defs>
        <linearGradient id="Gradient1" gradientTransform="rotate(90)">
            <stop offset="0%" stop-color="#ff0000"/>
            <stop offset="100%" stop-color="#00ff00"/>
        </linearGradient>
        <linearGradient id="Gradient2" gradientTransform="rotate(90)">
            <stop offset="0%" stop-color="#0000ff"/>
            <stop offset="100%" stop-color="#00ff00"/>
        </linearGradient>
        <pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse">
            <g transform="rotate(0, 300, 300)">
                <rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/>
                <rect shape-rendering="crispEdges"  x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/>
            </g>
       </pattern>
  </defs>
  <path id='arc5' style="stroke: url(#Pattern);" fill='transparent' stroke-width='60' d='M 364 58 A 250 250 0 1 1 235 58'/>
</svg>

Please add some documentation/explanation. – Ronnie Oosting Dec 27 '17 at 12:37 — Ronnie Oosting, Dec 27 '17 at 12:37

score 4 · Answer 4 · edited May 23 '17 at 11:53

4

In my answer to this similar question, I used six linear gradients to approximate a conical gradient. If you are only needing the gradient for the stroke/perimeter of a circle, rather than the fill, then it should be a good enough approximation.

svg multiple color on circle stroke

edited May 23 '17 at 11:53

Community

1
1

answered Jun 01 '14 at 15:47

Paul LeBeau

97,474
9
154
181

This looks and awesome! But any suggestions how do I generalize it for an arc with given outer and inner radius? Thanks a lot! – Tintin Jun 04 '14 at 15:05
You can get discontinuities of colour where two linear gradients meet. Probably the safest place to align the linearGradients with would be the corner of the inner radii. Because then that triangular area between where the two gradients end would be all the same colour. Does that answer your question? – Paul LeBeau Jun 04 '14 at 15:42
Hi, I needed a gradient along a full arc just like you, but I needed it to vary between 2 colors only - blue to violet... but no matter what color combinations I try or how many segments I divide my arc into - I am not getting proper gradient. Could you post/update your answer with a gradient varying between just 2 colors e.g. blue to voilet! Thanks – Tintin Jun 04 '14 at 20:30
Show me an example arc you want to colour - in a fiddle, for example. I will do what I can. – Paul LeBeau Jun 04 '14 at 21:31
http://jsfiddle.net/Cy7ec/1/ I wanted to vary the gradient from "#37bad6" (starting from blue on the right half into violet "#905387" on the ending on right half). Also please note that I am using d3 and am doing everything dynamically. Thanks a lot. – Tintin Jun 04 '14 at 22:50
It is much easier to use user space for your gradient stop coordinates in your case. And interpolate the stop colours in code. How is this?: http://jsfiddle.net/Cy7ec/3/ – Paul LeBeau Jun 05 '14 at 06:06
Thanks a lot! This looks awesome... I see that interpolation is the key here... just didnt know how to use that... thanks again! :-) – Tintin Jun 05 '14 at 07:04
Not that I need it but just for curiosity I made the inner radius of the arc as 0 to see how it would look in a full circle... there it seems to not look like a true gradient... do you think it could be done for a full circle as well? – Tintin Jun 05 '14 at 07:13
At r1=0 it has no distance to interpolate between, so you just get segments. You might instead use the outer radius or an average radius. You would also need to increase the number of segments. It would look better but still not great. This trick really relies on having a narrow band of colour. – Paul LeBeau Jun 05 '14 at 09:45
@PaulLeBeau: Your sample (http://jsfiddle.net/Weytu/) is really nice! Can you do a version which uses a linear gradient (from black to white) instead of using multiple colors? So that it looks like this angle gradient: http://jsfiddle.net/Weytu/ ? – Benny Code Nov 19 '14 at 14:08
Did you accidentally post the wrong link twice here? – Paul LeBeau Nov 19 '14 at 15:26

score 1 · Answer 5 · answered Jul 16 '18 at 19:50

1

If you dig into this page, you'll find code that approximates a conic gradient in SVG by drawing it as a series of 1 degree arcs.

answered Jul 16 '18 at 19:50

Dr. Pain

689
1
7
16

score 1 · Answer 6 · answered Jul 10 '11 at 07:23

1

Here is a possible vector conical gradient, but only VML (+IE) can do it...:

http://midiwebconcept.free.fr/Demos/degradeconique.htm

answered Jul 10 '11 at 07:23

Zepo

11
1

Alex Dickson · Answer 7 · 2021-12-17T13:17:34.063

Add a patern with 100% width and height so its just a one repetition pattern

<div style="width:100px">
    <svg viewBox="0 0 35 35" style="transform: scale(1) rotate(-90deg)">
        <defs>
          <pattern
            id="p1"
            patternUnits="userSpaceOnUse"
            width="100%"
            height="100%"
            patternTransform="rotate(90)"
          >
            <image href="https://blogs.igalia.com/dpino/files/2020/06/conic-gradient.png" width="36" height="36" />
          </pattern>
        </defs>
        <g>
          <circle
            cx="50%"
            cy="50%"
            stroke-width="2"
            r="15.915"
            stroke-dasharray="89, 100"
            stroke="url(#p1)"
            fill="none"
          />
        </g>
      </svg>
  </div>

score -1 · Answer 8 · answered Apr 05 '11 at 17:07

-1

http://en.wikipedia.org/wiki/File:Blended_colour_wheel.svg uses an innovative technique to approximate it.

answered Apr 05 '11 at 17:07

Stuart P. Bentley

10,195
10
55
84

11

it embeds a png image to show the gradient circle.. its not a truly vector graphics. only the strokes are done with path. – Sen Jacob Sep 11 '12 at 03:26

SVG angular gradient

8 Answers8

Linked

Related