Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

SVG Pieces to form image

Recommended Posts

Guys i really need help on this. Basically as you can see from the linked codepen i have a lowpoly lion in SVG, all made out of single triangles. At the moment i made this animation of all the pieces falling from a single spot and forming the image, but what i need is different.
I need all the pieces to come randomly from all the directions, top, lef, right, bottom, all going to the center and create the lion. There is a simple way to make this with TweenMax? I dont really know how to make this and i'm not really good with Javascript.
Thanks in advance!



See the Pen WoZQdV by Hecsa (@Hecsa) on CodePen

Link to comment
Share on other sites

Hello ,


You nearly got it. See the amended bellow:

        y: function(){
     return -620*Math.random()
        x: function() {
      return 420*Math.random()

Do have in mind that SVG is not the best option when you start moving a ton of elements in one go. You might see this pen hang right at the start. Consider using canvas for this or WebGL... Even DOM elements will give you a better performance than SVG in this case. Mainly because SVG is not currently offloaded to the GPU.

  • Like 4
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.