Jump to content


Distorting a square (SVG) using draggable?

Go to solution Solved by PointC,

Recommended Posts

Dear GSAP Community,

I am currently facing a problem with a new project. I want to allow the user to freely warp a square element into some random shape. Just like we know it from graphic programs.

Does anyone have an idea how to implement something like this? I have thought of a SVG element in connection with the Draggable plugin. Unfortunately I don't find any search results so far (which can definitely have something to do with my limited English skills).

Cheers to all


  • Like 1
Link to comment
Share on other sites

Hi there!


This sounds like a fun challenge, but it also sounds a little complex. There's not an 'out of the box solution' for this kind of thing. Someone may jump in with an answer, but I just want to manage expectations.  


Maybe this demo will be of some use?

See the Pen eYyRzJe by GreenSock (@GreenSock) on CodePen


Also - I just popped this together - it isn't using draggable, but it may give you a little step in the right direction. 


See the Pen LYQeZxg?editors=1111 by GreenSock (@GreenSock) on CodePen


Why don't you add draggable and give it a go? Questions with minimal demos often get more help around here.

  • Like 3
Link to comment
Share on other sites

  • Solution

Hi @Consequence :)


Thanks for being a Club member. We really appreciate it. 🎉


I think I'd wire up a polygon to some Draggables and do something like this. The width and height are dynamic so all you need to do is adjust the w/h variables to your liking. 


See the Pen zYRpBbm by PointC (@PointC) on CodePen


Hopefully that helps. Happy tweening.


  • Like 3
Link to comment
Share on other sites

Thanks a lot to all of you. These are great solutions for my project. I really appreciate it! 😊

  • Like 2
Link to comment
Share on other sites

Ah just remembered about this pen too. Thought I'd drop it here for any future thread-visitors.

See the Pen qBBWPPe by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

@GreenSock you can't just wander into a thread late and drop a one line solution with a cool plugin. I'm pretty sure that's cheating. 🤣

  • Haha 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.