Jump to content
Search Community

Make pattern loop infinitely

amort2000 test
Moderator Tag

Recommended Posts



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!




pattern to be animated.png

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...