1

I have the following svg that i would like to animate. I would like the red part moves along the path up to the end (so from the top right side to the left bottom side) :

enter image description here

The problem is : obviously is quite impossible to have a gradient following a path. Here is my code so far :

<svg id="fil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 783.53 362">
    <defs>
        <style>
            .cls-3{
                fill: none;
                stroke-miterlimit:10;
                stroke-width:3px;
            }
        </style>
        <linearGradient id="light" x1="100%" y1="100%">
            <stop offset="70%" stop-color="#3E3E3E">
                <!-- <animate attributeName="stop-color" to="#CF4B59" from="#3E3E3E" dur="0.5s" fill="freeze" /> -->
            </stop>
            <stop offset="100%" stop-color="#CF4B59">
                <!-- <animate attributeName="stop-color" from="#CF4B59" to="#3E3E3E" dur="0.5s" fill="freeze" /> -->
            </stop>
         </linearGradient>
    </defs>
    <g id="Calque_2" data-name="Calque 2">
        <g id="Calque_1-2" data-name="Calque 1">
            <g class="cls-2">
                <path class="cls-3" id="base" d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62" transform="translate(-52.32 -8.93)" stroke="url(#light)"/>
            </g>
        </g>
    </g>
</svg>

I tried to use "animate" to make it move along the path, but it's a vertical gradient which is applied and goes from the top to the bottom and not a gradient which follows the path.

I had other ideas to overcome this :

  1. Maybe by using a second path which would be the same shape than the first one but with inverted gradient so I could make it slide along the initial path maybe
  2. Or, I could use opacity to make the final path appear but i'm not sure i will be able to make the red part move in this way...

If you have some ideas to make the red part move from the top right to the bottom left it would help me a lot!

Aurélien
  • 409
  • 1
  • 4
  • 12
  • See https://stackoverflow.com/questions/14633363/can-i-apply-a-gradient-along-an-svg-path for gradient along a path. Then you just need to animate it. – Robert Longson Apr 10 '20 at 19:00

1 Answers1

2

Question

I would like the red part moves along the path up to the end (so from the top right side to the left bottom side) :

Consider using fill-line animation with stroke-dashoffset.
For clarity, I placed exactly the same curve below which will show the route of filling the line with color
If this indication of the motion path is not necessary, simply remove the path id = "trace" 

<svg id="fil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 783.53 362">
    <defs>
        <style>
            .cls-3{
                fill: none;
                stroke-miterlimit:10;
                stroke-width:3px;
    stroke:#E7E7E7;
            }
   #base {
   fill: none;
   stroke:crimson;
   stroke-width:3px;
   stroke-dashoffset:1732;
   stroke-dasharray:1732;
   animation: fillStroke 10s linear forwards;
   }
   
   @keyframes fillStroke {
   to {stroke-dashoffset:0;}
   }
        </style>
         </defs> 
     <g transform="translate(-352.32 -8.93)">
        <path id="trace"  class="cls-3"  d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62"  />
          <g class="cls-2">
         
      <path id="base"    d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62" >
      
       </path>
            </g>
  </g> 
 </svg>

Gradient animation option

Instead of filling with color as the length of the curve increases, a gradient will perform this function 

<svg id="fil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 783.53 362">
    <defs>
        <style>
            .cls-3{
                fill: none;
                stroke-miterlimit:10;
                stroke-width:3px;
    stroke:#E7E7E7;
            }
   #base {
   fill: none;
   stroke:url(#light);
   stroke-width:3px;
   stroke-dashoffset:1732;
   stroke-dasharray:1732;
   animation: fillStroke 10s linear forwards;
   }
   
   @keyframes fillStroke {
   to {stroke-dashoffset:0;}
   }
        </style>
        <linearGradient id="light" x1="100%" y1="100%">
            
            <stop offset="50%" stop-color="#CF4B59">
                 <!-- <animate attributeName="stop-color" from="#CF4B59" to="#3E3E3E" dur="10s" fill="freeze" />  -->
            </stop>
   <stop offset="100%" stop-color="#3E3E3E">
                 <!-- <animate attributeName="stop-color" to="#CF4B59" from="#3E3E3E" dur="10s" fill="freeze" />  -->
            </stop>
        
   </linearGradient> 
   </defs> 
     <g transform="translate(-352.32 -8.93)">
        <path  class="cls-3"  d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62"  />
          <g class="cls-2">
         
      <path id="base"    d="M656.89,8.93c0,48,7.42,124.9,64.45,125.92a115.56,115.56,0,0,0,53.83-12.28c8.35-4.2,16.35-9.59,21.84-17.15s8.15-17.62,5.25-26.51c-3.12-9.53-12.16-16.28-21.87-18.83-61.57-16.19-142.83,57.7-139.63,119.4,1.23,23.69,16.72,41.59,37.61,51.29,27,12.55,60.55,13.36,89.45,8.06,12.25-2.25,25.82-5.25,37.26-10.44,12.63-5.72,32.28-20.08,28.88-36.64a18,18,0,0,0-15.63-14.59c-10.28-1.4-19.14,3.57-26.76,10-16.18,13.66-29.34,30.65-44.7,45.2a359.34,359.34,0,0,1-49.33,39.08A356.65,356.65,0,0,1,638.08,303c-35.77,14.83-90.88,29.56-123.22-.47-11.61-10.78-17.61-26.71-18.41-42.53-1.07-21.19,4.41-54.95,30-59.28,36.67-6.2,78.65,49.05,86.38,79.36,8.2,32.14-5.44,70.78-35.75,84.26-28.8,12.81-63.93,0-85.8-22.72-23.52-24.41-18.59-55.9-36.07-82.56-16-24.39-41.3-23.5-66.77-24.62" >
      
       </path>
            </g>
  </g> 
   
</svg>
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54
  • Thank you for your help. However, the gradient is linear so it doesn't follow the path and curves. For exemple, for a same value of Y the gradient is the same on all the horizontal line. So if the path go across this symbolic line, the gradient will be the same at each point. That what we clearly see from the top of the path, at the first loop. What i'm trying to do is to get a gradient following the path's curves. I will try @Robert Longson's solutions – Aurélien Apr 12 '20 at 21:29