Examples of SVG animations for web?

Grasshopper
1

I couldn’t find anything on the forum or Google. I sure examples exist far more complex than I can imagine but I was thinking you could create some reeaaally impressive/smooth 2D morphs working with Pufferfish and exporting SVG keyframes into GreenSock or the like.

Beyond that though, couldn’t you just skip the middle man using JSON directly?

1 Like
2

I don’t understand the problem/request/question.

1 Like
3

Thanks, I was being obtuse.

So the examples below are SVG animations, smoke and mirrors essentially to create very light weight, scale-able 3D, interactive or animated effects on the web. They are working from SVG files, perhaps the simplest 2D vector file. I’m surprised I haven’t seen any play between Grasshopper and these animations, considering the complexity of plugins like ShapeDiver, it seems like pulling SVG data and slider variables would be in reach. I’m just curious if anyone has seen an example of this? If nothing else, I think the complexly of Grasshopper form finding and pattern making mixed with some clever svg animation scripting would be mind bending.

I just want to start a discussion on that.

2 Likes
4

Hi @closedcurve,

I don’t know exactly what the JSON file does in this scenario, but I imagine all information about the animation (frame rate, frame order, size, etc.) in question is stored in it?
Or does it store all the information, including the single SVG frames?

What you could do in either scenario is, simply parse the JSON file yourself, straight from Grasshopper. You probably need scripting (e.g. Python, C#, VB) for this though!
I’d start by looking at an example JSON file and try to find out the structure and logic behind it. If it’s an open standard you might even find documentation only.

1 Like