Jump to content
GreenSock

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

Animating SVG polygon points

Recommended Posts

Hi, what's the most efficient method for animating polygon points in an SVG? Here's the result I'm looking for from the CodePen attached:

 

grid-demo-600px-0loops-12fps-giphy-256co

 

I'm open to using plugins, but the closest I found was morphSVG, which I'm not sure is the method I want to use (Creating 2 separate SVGs).

 

There is a possibly that this will go in a 3rd party server HTML creative, in which case I'd need a method that doesn't use these, but happy for plugin suggestions for now

Thanks!

See the Pen eYZyxZM by friendlygiraffe (@friendlygiraffe) on CodePen

Link to post
Share on other sites

Hey friendlygiraffe. Is there a reason why you're restricted to SVG? I would think that this sort of thing would be done in canvas instead because it's faster at rendering lines. I'd create a list of points with their starting positions in a grid, each update affect each point's position randomly in the x and y direction while enforcing some bounds, and also draw a line from each point to each point around it.

  • Like 1
Link to post
Share on other sites
7 minutes ago, ZachSaucier said:

Hey friendlygiraffe. Is there a reason why you're restricted to SVG? I would think that this sort of thing would be done in canvas instead because it's faster at rendering lines. I'd create a list of points with their starting positions in a grid, each update affect each point's position randomly in the x and y direction while enforcing some bounds, and also draw a line from each point to each point around it.

I had a look at canvas, and it seems to use greensock with it, I'd have to port it through something like pixijs. Is there a more straight forward approach?

Link to post
Share on other sites
1 hour ago, mikel said:

Hey @friendlygiraffe,

 

Could this be an option for you?
Regardless of whether path or polygon points ...

 

 

 

 

Happy tweening ...

Mikel

 

Thanks Mikel - Not really, I want the points to animate individually, rather that a uniform scale

  • Like 1
Link to post
Share on other sites
2 hours ago, friendlygiraffe said:

it seems to use greensock with it, I'd have to port it through something like pixijs. Is there a more straight forward approach?

Not at all! GSAP animates any object you give it. 

 

There are a lot of ways you could set it up but here's the gist of one method:

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

  • Like 1
Link to post
Share on other sites
9 minutes ago, ZachSaucier said:

Not at all! GSAP animates any object you get it. 

 

There are a lot of ways you could set it up but here's the gist of one method:

 

 

This is certainly something I can have a play with, thanks.

Link to post
Share on other sites
5 minutes ago, mikel said:

here is a spider web

I might not recommend Zim itself in most circumstances but you can definitely learn from that implementation :) 

  • Like 1
Link to post
Share on other sites

I found this which animated SVG polygon points, could something similar be done but without the draggable functionality ?

See the Pen QdbQjN by osublake (@osublake) on CodePen

Link to post
Share on other sites
4 hours ago, friendlygiraffe said:

could something similar be done but without the draggable functionality ?

Yep! Go for it. 

Link to post
Share on other sites

None of the following is GSAP specific but might be interesting to you.

 

This is a fun one with SVG:

See the Pen MWwbWgX by kawamu (@kawamu) on CodePen

 

But as stated above Canvas is gonna be highly more performant than SVG.

 

So you may like this Canvas example (the zoom is a touch extreme).

See the Pen Efskr by minimalmonkey (@minimalmonkey) on CodePen

 

That Canvas example was I think based off this Flash example (requires Flash):
- http://www.flashmonkey.co.uk/flash/colorwall/
http://www.flashmonkey.co.uk/flash/colorwall-with-images/

 

Which was based off this original Flash creation that is no longer online by famed Japanese designer Yugo Nakamura done for Wonderwall.
- https://thefwa.com/cases/wonderwall
http://tha.jp/807/

 

Flash days 😢 ❤️ . But its nice to know @GreenSock had more forethought than mighty Adobe, long live AS JS. 😄

  • Like 3
Link to post
Share on other sites
4 hours ago, Shrug ¯\_(ツ)_/¯ said:

None of the following is GSAP specific but might be interesting to you.

 

This is a fun one with SVG:

 

 

 

But as stated above Canvas is gonna be highly more performant than SVG.

 

So you may like this Canvas example (the zoom is a touch extreme).

 

 

 

That Canvas example was I think based off this Flash example (requires Flash):
- http://www.flashmonkey.co.uk/flash/colorwall/
http://www.flashmonkey.co.uk/flash/colorwall-with-images/

 

Which was based off this original Flash creation that is no longer online by famed Japanese designer Yugo Nakamura done for Wonderwall.
- https://thefwa.com/cases/wonderwall
http://tha.jp/807/

 

Flash days 😢 ❤️ . But its nice to know @GreenSock had more forethought than mighty Adobe, long live AS JS. 😄

I was just thinking how much I miss Flash! Thanks for this, really handy

Link to post
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.

×