Search code examples
svgsvg-animate

svg circle tapered fading stroke

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.

enter image description here

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

Solution

  • 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>