Jump to content
Search Community

Animating SVG polygon points

friendlygiraffe test
Moderator Tag

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 comment
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 comment
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 comment
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 comment
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 comment
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 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...