从右下到左上填充SVG

Question

I am trying to create a animation that fills my SVG from bottom right to top left after 2 seconds, what I have now is that it fills from right to left right when the page loads:

 <div id="home" class="section" style="height:100vh;background:pink;"> <div class="background"> <svg viewBox="0 0 1366 768"> <defs> <clipPath id="a" transform="translate(7)"> <rect class="a" width="1366" height="768" /> </clipPath> <linearGradient id="animation"> <stop offset="0" stop-color="#ffffff"> <animate dur="1s" attributeName="offset" fill="freeze" from="0" to="1" begin="2.5s;" /> </stop> <stop offset="0" stop-color="rgba(0,0,0,0)"> <animate attributeName="offset" from="0" to="1" /> </stop> </linearGradient> </defs> <g id="line"> <path class="c" fill="url(#animation)" d="M-7,0V768H1027.27l3.28-5.74c-3.1-5-4.9-11.68-6.45-15.93a5,5,0,0,1-.31-1.8c-.59-.57-1.19-1.12-1.77-1.71-4.19-4.3-8.13-8.78-12.31-13a5.41,5.41,0,0,1-2.41-1.24c-4-3.5-7.81-7.21-11.48-11-5.46-4.43-11-8.81-16.38-13.28-4.44-3.66-8.52-7.74-12.59-11.83l-1-1c-6.4-4.7-12.8-10.09-17.69-16.33-3.17-2.59-6.44-5.07-9.84-7.37-6.36-4.28-13.79-6.62-20.08-11-6.63-4.57-10.46-11.16-13.91-18.25A55.54,55.54,0,0,0,889,619.33c-6.11-5.14-12.61-9.88-18.16-15.64a78,78,0,0,1-12.74-18.42c-7.73-14.85-12.53-30.54-10.76-47.38,1.9-18,8.79-34.68,13.49-52,1.5-5.52,3.18-10.45,6.24-14.93a5.66,5.66,0,0,1,1.46-2c.62-.76,1.28-1.51,2-2.25,1.74-1.78,3.61-3.39,5.52-5,2.54-8.39,5.63-16.95,11.57-22.85s14.36-8.35,21.46-12.53l3.7-3.57a5.36,5.36,0,0,1,2.39-5.47l6-4,.13-.08a5.88,5.88,0,0,1,.86-1.14l.3-.28a56.64,56.64,0,0,1,6.64-8.71,65.33,65.33,0,0,1,12.5-9.54,117.79,117.79,0,0,1,21.82-11.11c2.33-2.18,4.67-4.3,7-6.36a5.65,5.65,0,0,1,1.71-1.05c10.21-9.09,20.39-18.22,30.84-27,23.11-19.45,53.32-31.79,67.9-59.69,3.29-6.31,5.61-13.11,9.27-19.24a42.87,42.87,0,0,1,8.74-10.4,4.6,4.6,0,0,1,1.48-3.27c12.36-12.17,26.31-22.61,38.52-35,9.54-9.64,17.38-20.78,26.94-30.43a125.77,125.77,0,0,1,28.08-21.42,5.51,5.51,0,0,1,3.16-3.15,78.09,78.09,0,0,1,8.24-2.51c24.36-10.73,51.73-14.36,78.2-11.67l.37.06a4.68,4.68,0,0,1,3.1-1.06,4.55,4.55,0,0,1,4.55,3.25c14-.7,28.06-1.53,41.63,1.59A41,41,0,0,1,1351,176.34a108.65,108.65,0,0,1,10.4,6.73L1366,175V0Z" transform="translate(7)" /> <path class="d" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5" transform="translate(7)" /> </g> <polyline class="c" points="1373 175 1373 184.22 1370.37 179.61" /> </svg> </div> </div> 

How can I make it so that it fills from bottom right to top left after 2 seconds?

Answer 1

begin changes the animation start time and set the initial offset to be the same as the start animation value as the animation won't apply before its start time.

You can either adjust x1, y1, x2, y2 of the gradient or set gradientTransform="rotate(45)" though you'd probably want a scale transform too as the shape you're filling isn't square.

  <svg viewBox="0 0 1366 768"> <defs> <clipPath id="a" transform="translate(7)"> <rect class="a" width="1366" height="768" /> </clipPath> <linearGradient id="animation" x1="0" y1="0" x2="100%" y2="100%"> <stop offset="1" stop-color="#580073"> <animate dur="2s" begin="2s" attributeName="offset" fill="freeze" from="1" to="0" /> </stop> <stop offset="1" stop-color="#fff"> <animate dur="2s" begin="2s" attributeName="offset" fill="freeze" from="1" to="0" /> </stop> </linearGradient> </defs> <g id="line"> <path class="c" fill="url(#animation)" d="M-7,0V768H1027.27l3.28-5.74c-3.1-5-4.9-11.68-6.45-15.93a5,5,0,0,1-.31-1.8c-.59-.57-1.19-1.12-1.77-1.71-4.19-4.3-8.13-8.78-12.31-13a5.41,5.41,0,0,1-2.41-1.24c-4-3.5-7.81-7.21-11.48-11-5.46-4.43-11-8.81-16.38-13.28-4.44-3.66-8.52-7.74-12.59-11.83l-1-1c-6.4-4.7-12.8-10.09-17.69-16.33-3.17-2.59-6.44-5.07-9.84-7.37-6.36-4.28-13.79-6.62-20.08-11-6.63-4.57-10.46-11.16-13.91-18.25A55.54,55.54,0,0,0,889,619.33c-6.11-5.14-12.61-9.88-18.16-15.64a78,78,0,0,1-12.74-18.42c-7.73-14.85-12.53-30.54-10.76-47.38,1.9-18,8.79-34.68,13.49-52,1.5-5.52,3.18-10.45,6.24-14.93a5.66,5.66,0,0,1,1.46-2c.62-.76,1.28-1.51,2-2.25,1.74-1.78,3.61-3.39,5.52-5,2.54-8.39,5.63-16.95,11.57-22.85s14.36-8.35,21.46-12.53l3.7-3.57a5.36,5.36,0,0,1,2.39-5.47l6-4,.13-.08a5.88,5.88,0,0,1,.86-1.14l.3-.28a56.64,56.64,0,0,1,6.64-8.71,65.33,65.33,0,0,1,12.5-9.54,117.79,117.79,0,0,1,21.82-11.11c2.33-2.18,4.67-4.3,7-6.36a5.65,5.65,0,0,1,1.71-1.05c10.21-9.09,20.39-18.22,30.84-27,23.11-19.45,53.32-31.79,67.9-59.69,3.29-6.31,5.61-13.11,9.27-19.24a42.87,42.87,0,0,1,8.74-10.4,4.6,4.6,0,0,1,1.48-3.27c12.36-12.17,26.31-22.61,38.52-35,9.54-9.64,17.38-20.78,26.94-30.43a125.77,125.77,0,0,1,28.08-21.42,5.51,5.51,0,0,1,3.16-3.15,78.09,78.09,0,0,1,8.24-2.51c24.36-10.73,51.73-14.36,78.2-11.67l.37.06a4.68,4.68,0,0,1,3.1-1.06,4.55,4.55,0,0,1,4.55,3.25c14-.7,28.06-1.53,41.63,1.59A41,41,0,0,1,1351,176.34a108.65,108.65,0,0,1,10.4,6.73L1366,175V0Z" transform="translate(7)" /> <path class="d" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5" transform="translate(7)" /> </g> <polyline class="c" points="1373 175 1373 184.22 1370.37 179.61" /> </svg>