Jump to content


Repeat whole SVG as pattern

Recommended Posts


I have a SVG I have created. You can see it by following the link to the codpen url. I want to create an animation to repeat the DNA pattern indefinitely at 45 degrees while keeping it inside the circle.


I go no clue where to start :D

See the Pen zYGVRxO by sherryLooper (@sherryLooper) on CodePen

Link to comment
Share on other sites

Welcome to the forum. :)


I'm not sure what you're asking here. I don't see any animation in your demo. We're happy to help with any GSAP specific questions. Could you elaborate a bit about what you're trying to do? Thanks.

  • Like 2
Link to comment
Share on other sites


I want to animate the helix structure in the circle by possibly making its duplicates so that they are concatenated with each other at their ends and this pattern will repeat itself indefinitely, so that it gives the illusion of one single strand moving forward at 45 degree angle.

I hope that it makes sense to you now.  Fingers crossed. 

Link to comment
Share on other sites

There are a whole bunch of DNA demos on CodePen that should give you some ideas.

See the Pen by search (@search) on CodePen


If you have specific GSAP related problems or questions as you progress with your project, we're happy to help. :)


  • Like 3
Link to comment
Share on other sites

Thanks. This is gonna help a lot


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.