Make pattern loop infinitely

[amort2000 9 Likes (Newbie)]

Hi,

 

I've an SVG pattern that'd like to loop continuously, start to finish. It's a simple correlating pattern, but I'm not sure how to make it appear to be loop infinity?

I've tried to search for this, but not sure I'm wording my queries right? Any pointer please?

 

I've attached the pattern (as a png, I will be animiating the orignal SVG though ) - thanks!

 

Andrew

 

[ZachSaucier 7,130 Likes (Superhero)]

Hey amort2000 and welcome.

 

So long as the SVG is wide enough to cover the entire width + one repeat of the pattern, you should be able to create an infinite animation by simply translating the SVG by the distance of one iteration, setting the ease to none, and setting the repeat to -1.

 

Here's a hastily done version using the PNG you provided, but the concept is there. I recommend using less magical numbers than what I pulled out of a hat  

See the Pen BaogegK?editors=0010 by GreenSock (@GreenSock) on CodePen

[amort2000 9 Likes (Newbie)]

Oh, cool - that makes sense - think I was overthinking that one!

 

Thanks,

 

a