I dynamically create a path using SVG . Next, I want to add a gradient to my path, but I'm stuck.

As I tried to do, shown in image 2. My gradient goes along the path, but I need the gradient to look like in image 1.

enter image description here

Image 1

enter image description here

Image 2

My definitions of gradient and stroke as follows:

 <svg> <defs> <linearGradient id = "grad1" spreadMethod="reflect"> <stop offset="0%" style="stop-color: lightcoral;" /> <stop offset="50%" style="stop-color: #ffffff;" /> <stop offset="100%" style="stop-color: lightcoral;" /> </linearGradient> </defs> </svg>

script

 svgPath.setAttribute("stroke", "url(#grad1");` svgPath.setAttribute("fill", "none"); svgPath.setAttribute("stroke-linejoin", "round");` svgPath.setAttribute("stroke-width", "10"); });

3 answers 3

I decided to give an example of the animation of the appearance of polyline , I had to enclose the animate in each polyline to get the desired result, and then you can customize the animation as your heart desires (I mean, changing the location ( from="N,N etc." ):

 polyline { stroke-linejoin: round; fill: none; animation: opac 3s 1; } @keyframes opac { from { opacity: 0; } to { opacity: 1; } } 
 <svg viewBox="0 0 1000 1000"> <polyline points="0,125 150,125 150,25 300,25" stroke="#4E4E4E" stroke-width="30"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> <polyline points="0,125 150,125 150,25 300,25" stroke="#5C5C5C" stroke-width="28"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> <polyline points="0,125 150,125 150,25 300,25" stroke="#6E6E6E" stroke-width="24"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> <polyline points="0,125 150,125 150,25 300,25" stroke="#7C7C7C" stroke-width="22"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> <polyline points="0,125 150,125 150,25 300,25" stroke="#828282" stroke-width="20"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> <polyline points="0,125 150,125 150,25 300,25" stroke="#8D8D8D" stroke-width="18"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> <polyline points="0,125 150,125 150,25 300,25" stroke="#9F9F9F" stroke-width="16"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> <polyline points="0,125 150,125 150,25 300,25" stroke="#ADADAD" stroke-width="14"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> <polyline points="0,125 150,125 150,25 300,25" stroke="#BDBDBD" stroke-width="8"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> <polyline points="0,125 150,125 150,25 300,25" stroke="#C5C5C5" stroke-width="6"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> <polyline points="0,125 150,125 150,25 300,25" stroke="#D2D2D2" stroke-width="4"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> <polyline points="0,125 150,125 150,25 300,25" stroke="#D6D6D6" stroke-width="2"> <animate attributeName="points" dur="3s" repeatCount="1" from="0,125 150,125 0,125 0,125" to="0,125 150,125 150,25 300,25"/> </polyline> </svg>

    You can not make a gradient along the entire path, turning it in the corners, as you want.

    If instead you just want to make the gradient vertically oriented, then you need to use the attributes x1 , y1 , x2 and y2 to set the line along which the gradient runs.

    If you do not specify these attributes, the gradient is oriented horizontally according to your second image.

    <linearGradient id = "grad1" spreadMethod="reflect" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" style="stop-color: lightcoral;" /> <stop offset="50%" style="stop-color: #ffffff;" /> <stop offset="100%" style="stop-color: lightcoral;" /> </linearGradient>

    If you want to have a “tube” effect, similar to a gradient, then the simplest way is a multi-level path with different widths of lines.

     svg { stroke-linejoin:round; fill:none; } 
     <svg> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#4E4E4E" stroke-width="30" /> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#5C5C5C" stroke-width="28" /> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#6E6E6E" stroke-width="24" /> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#7C7C7C" stroke-width="22" /> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#828282" stroke-width="20" /> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#8D8D8D" stroke-width="18" /> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#9F9F9F" stroke-width="16" /> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#ADADAD" stroke-width="14" /> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#BDBDBD" stroke-width="8" /> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#C5C5C5" stroke-width="6" /> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#D2D2D2" stroke-width="4" /> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#D6D6D6" stroke-width="2" /> </svg>

    Note translator

    I chose this relatively simple topic for translation, since here I used the original gradient simulation technique along a complex path, which can be used in practice and to realize the animation effect of gradually filling pipes and other containers.

    Source: Creating a layer of gradient within an SVG path dynamically @Paul LeBeau

      Polyline animation option

       svg { stroke-linejoin:round; fill:none; } 
       <svg> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#4E4E4E" stroke-width="30" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#5C5C5C" stroke-width="28" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#6E6E6E" stroke-width="24" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#7C7C7C" stroke-width="22" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#828282" stroke-width="20" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#8D8D8D" stroke-width="18" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#9F9F9F" stroke-width="16" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#ADADAD" stroke-width="14" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#BDBDBD" stroke-width="8" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#C5C5C5" stroke-width="6" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#D2D2D2" stroke-width="4" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> <polyline points="0,125, 150,125 150,25, 300,25" stroke="#D6D6D6" stroke-width="2" > <animate attributeName="points" values="0,125;0,125, 150,125;0,125, 150,125 150,25;0,125, 150,125 150,25, 300,25" dur="2s" fill="freeze" /> </polyline> </svg>

      Option animation path

      • We translate polyline coordinates to path coordinates
      • For all patches that are responsible for the shades of the pseudo- class-"poly" assign the same class class-"poly"
      • we animate all patches at the same time using the attributes stroke-dasharray , stroke-dashoffset

       svg { stroke-linejoin:round; fill:none; } .poly { stroke-dasharray: 850 850; stroke-dashoffset: 850; animation-duration: 7s; animation-name: draw; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; } @keyframes draw { from { stroke-dashoffset: 850; } to { stroke-dashoffset: 0; } } 
       <svg width="400" height="400" viewBox="0 0 400 400"> <path d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#7C7C7C" stroke-width="30" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#4E4E4E" stroke-width="30" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#5C5C5C" stroke-width="28" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#6E6E6E" stroke-width="24" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#7C7C7C" stroke-width="22" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#828282" stroke-width="20" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#8D8D8D" stroke-width="18" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#9F9F9F" stroke-width="16" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#ADADAD" stroke-width="14" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#BDBDBD" stroke-width="8" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#C5C5C5" stroke-width="6" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#D2D2D2" stroke-width="4" /> <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#D6D6D6" stroke-width="2" /> </svg>