svg circle tapered fading stroke - svg

Question

I am trying to create an svg file with a circle that has a tapered stroke that fades, meaning the stroke width will be the thickest (say 20px) with the original color and will be the thinnest (say 3px) on the opposite side where the color has faded. I was able to create the circle with color fading with the gradient tool, but I am struggling to figure out how to change the stroke width
Here's the code I have so far, which I created in Photoshop and exported to svg.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
<defs>
<style>
.cls-1 {
fill: none;
stroke-width: 20px;
stroke: url(#a);
}
</style>
<linearGradient id="a" x1="255.5" y1="240" x2="255.5" y2="51" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgba(96,0,0,1)"/>
<stop offset="1" stop-color="rgba(96,0,0,.1)"/>
</linearGradient>
</defs>
<circle class="cls-1" cx="255.5" cy="255.5" r="184.5"/>
</svg>
Here's an image of what I am trying to do.
Sorry, one more favor. I am trying to create an icon, so it will have four of these circles with different colors, with one fading to the top as shown, another fading to the bottom, and the other two to each of the sides. I will really appreciate it if you can also show me how to rotate :)
Thank you in advance.
Regards,
Mike

Answer 1

I would draw a bigger circle with a hole inside. In this case I'm using a mask. You can also draw a holloed path. In both cases you are using the gradient as a fill not as a stroke
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
<defs>
<style>
.cls-1 {
fill: url(#a);
}
</style>
<linearGradient id="a" x1="255.5" y1="240" x2="255.5" y2="51" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgba(96,0,0,1)"/>
<stop offset="1" stop-color="rgba(96,0,0,.1)"/>
</linearGradient>
<mask id="m">
<circle id="c1" cx="255.5" cy="255.5" r="184.5" fill="white" />
<circle fill="black" cx="255.5" cy="245.5" r="164.5"/>
</mask>
</defs>
<circle cx="255.5" cy="255.5" r="184.5" class="cls-1" mask="url(#m)" />
</svg>
And this is an example where I'm using a holloed path instead of the masked circle. Please note that in this case I'm centering the path atound the point x=0 y=0.
<svg width="500" height="500" viewBox="-250 -250 500 500">
<defs>
<style>
.cls-1 {
fill: url(#a);
}
</style>
<linearGradient id="a" y1="200" y2="-200" x1="0" x2="0" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgba(96,0,0,1)"/>
<stop offset="1" stop-color="rgba(96,0,0,.1)"/>
</linearGradient>
</defs>
<path class="cls-1" d="M184.5,0A184.5,184.5 0 0 1 -184.5,0A184.5,184.5 0 0 1 184.5,0M164.5,-10A164.5,164.5 0 0 0 -164.5,-10A164.5,164.5 0 0 0 164.5,-10"/>
</svg>

Answer 2

I am trying to create an icon, so it will have four of these circles
with different colors, with one fading to the top as shown, another
fading to the bottom, and the other two to each of the sides. I will
really appreciate it if you can also show me how to rotate
The first circle rotates clockwise
<animateTransform
attributeName="transform"
type="rotate"
values="0 150 150;360 150 150"
begin="svg1.click"
dur="10s"
repeatCount="indefinite"
/>
The second circle rotates counterclockwise.
Since the top circle is set to the opacity parameter fill-opacity: 0.5;
then the effect of changing the thickness of the stroke is created
Added gradient animation to both circles:
<animate
attributeName="stop-color"
dur="1.5s"
values="red;yellow;red"
repeatCount="indefinite"
/>
The text Click me has been added for demonstration it can be removed.
Below is the complete code:
.container {
width:50%;
height:50%;
}
svg {
background:black;
}
#path1 {
fill:url(#gradl);
stroke:none;
fill-opacity:1;
}
#path2 {
fill:url(#grad2);
stroke:none;
fill-opacity:0.5;
}
#crc1 {
stroke:none;
fill:black;
}
#txt1 {
fill:url(#grad2);
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" >
<defs>
<linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="red" stop-opacity="0.9">
<animate
attributeName="stop-color"
dur="1.5s"
values="red;yellow;red"
repeatCount="indefinite"
/>
</stop>
<stop offset="100%" stop-color="yellow">
<animate
attributeName="stop-color"
dur="1.5s"
values="yellow;red;yellow" repeatCount="indefinite"
/>
</stop>
</linearGradient>
<linearGradient id="grad2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="lime">
<animate
attributeName="stop-color"
dur="1.5s"
values="lime;purple;lime"
repeatCount="indefinite"
/>
</stop>
<stop offset="100%" stop-color="purple">
<animate
attributeName="stop-color"
dur="1.5s"
values="purple;lime;purple" repeatCount="indefinite"
/>
</stop>
</linearGradient>
</defs>
<path id="path1" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" >
<animateTransform
attributeName="transform"
type="rotate"
values="0 150 150;360 150 150"
begin="svg1.click"
dur="10s"
repeatCount="indefinite"
/>
</path>
<path id="path2" transform="rotate(45 150 150)"
d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" >
<animateTransform
attributeName="transform"
type="rotate"
values="360 148 148;0 148 148"
begin="svg1.click"
dur="10s"
repeatCount="indefinite" />
</path>
<circle id="crc1" cx="150" cy="150" r="90" />
<text id="txt1" x="80" y="160" font-size="36" font-weight="700" > Click me </text>
</svg>
</div>