Photoshop Question posted in
The official user guide can be found here.

svg circle tapered fading stroke – Photoshop

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search