SVG Element Explosion


Is it possible to:

  1. Load an SVG
  2. get access to all elements (shapes) of that SVG
  3. let them drift apart and back together again?

Should look like the whole shape explodes, but build itself back together. If it’s not possible with an SVG, what would be the easiest way to do something like this?

Thanks in advance!

The geomerative library by Ricard Marxer has examples that split svg to shapes so you might be able to work with that.

No, sadly that’s not really what I am looking for. It splits the SVG into random shapes, I have my shapes already splitted in AI


This is some of what I found…

GetChild \ Examples \
This is also here:

I was able to get and move Michigan:

I see the possibilities!

This may very much depend on your source SVG file.

It is possible to write code to do this with this example and have each state drift out and back.


Yeah thanks, that’s what I need!

Now what’s the best way to make them drift apart and back togther? I guess I’ll need 8 different directions, does someone know an example for that? Does not have to be with SVGs, can be all kinds of objects.

I will leave that with you.

Check out the tutorials, references and examples.

You may want to start here with some tutorials:

This is just one way of doing it and may help get you started:

I always start my projects with the Processing resources and go from there.


Thank you very much, but I know how to make them move, I was kind of looking for an example that really looks like an explosion, so I have something to lean on.

That is my shape, and I want to make these poligons drift apart in every direction. I guess I have an idea how to do that either, but it seems quite laborious and so I was hoping someone already has a smart solution for this

well, processing is not illustrator or after effects so often you need to do that “laborious” job. And I don’t think there is a perfect example that does “explosion” effect that you can copy and paste to use in your code.

Dan made a fireworks example in p5.js and processing

also moving particles from a text (p5.js)

Like the fireworks example, I would start with moving polygons outward from the center point. But I can imagine that this will be too predictable so you may want to add physics library to account mass, torque etc, for example. And of course, if you have specific questions you can come back to ask. Good luck!

Okay thank you very much! And yes it is too predictable, you’re right, adding physics library will definitely help, thanks!

@p_a ,

Only at first…

Check out some of the examples:
Examples \

The Motion and Simulate topics may be of interest.