# SVG Element Explosion

**URL:** <https://discourse.processing.org/t/svg-element-explosion/29083>\
**Category:** Coding Questions\
**Created:** [April 3, 2021, 9:14am UTC](https://discourse.processing.org/t/svg-element-explosion/29083 "2021-04-03T09:14:42Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![p\_a](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@p\_a](https://discourse.processing.org/u/p_a)\
**Post date:** [April 3, 2021, 9:14am UTC](https://discourse.processing.org/t/svg-element-explosion/29083/1 "2021-04-03T09:14:42Z")

</div>

Hi!

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!

---

<div class="post-metadata">

**Author:** ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)\
**Post date:** [April 3, 2021, 9:40am UTC](https://discourse.processing.org/t/svg-element-explosion/29083/2 "2021-04-03T09:40:45Z")

</div>

The [geomerative](http://www.ricardmarxer.com/geomerative/) library by [Ricard Marxer](http://www.ricardmarxer.com/) has [examples](https://github.com/rikrd/geomerative/blob/master/examples/) that split svg to shapes so you might be able to work with that.

---

<div class="post-metadata">

**Author:** ![p\_a](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@p\_a](https://discourse.processing.org/u/p_a)\
**Post date:** [April 3, 2021, 9:46am UTC](https://discourse.processing.org/t/svg-element-explosion/29083/3 "2021-04-03T09:46:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 3, 2021, 10:06am UTC](https://discourse.processing.org/t/svg-element-explosion/29083/4 "2021-04-03T10:06:25Z")

</div>

Hello,

This is some of what I found…

Resources:  
_[Get Child / Examples / Processing.org](https://processing.org/examples/getchild.html)_  
This is also here:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/01f5d6271c57b7aba32ac3d66a55c14a1b7a4350.png)

I was able to get and move Michigan:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0be3b66963acb15025fc092b0c6ef207a1ce9260.png)

> [@p\_a](#):
>
> let them drift apart and back together again?

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.

`:)`

---

<div class="post-metadata">

**Author:** ![p\_a](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@p\_a](https://discourse.processing.org/u/p_a)\
**Post date:** [April 3, 2021, 10:10am UTC](https://discourse.processing.org/t/svg-element-explosion/29083/5 "2021-04-03T10:10:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 3, 2021, 10:16am UTC](https://discourse.processing.org/t/svg-element-explosion/29083/6 "2021-04-03T10:16:14Z")

</div>

> [@p\_a](#):
>
> Now what’s the best way to make them drift apart and back togther?

I will leave that with you.

Check out the tutorials, references and examples.

You may want to start here with some tutorials:

- [Tutorials / Processing.org](https://processing.org/tutorials/)
- [2D Transformations / Processing.org](https://processing.org/tutorials/transform2d/)

This is just _one way_ of doing it and may help get you started:

- [Linear Interpolation / Examples / Processing.org](https://processing.org/examples/interpolate.html)
- [lerp() / Reference / Processing.org](https://processing.org/reference/lerp_.html)

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

`:)`

---

<div class="post-metadata">

**Author:** ![p\_a](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@p\_a](https://discourse.processing.org/u/p_a)\
**Post date:** [April 3, 2021, 10:30am UTC](https://discourse.processing.org/t/svg-element-explosion/29083/7 "2021-04-03T10:30:07Z")

</div>

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.

 ![810-dance](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/106d5941ff0cd56d9b061259bc21fd19f6c71516.png)

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

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 3, 2021, 11:57am UTC](https://discourse.processing.org/t/svg-element-explosion/29083/8 "2021-04-03T11:57:17Z")

</div>

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

[![](https://img.youtube.com/vi/CKeyIbT3vXI/hqdefault.jpg "Coding Challenge #27: Fireworks!") ](https://www.youtube.com/watch?v=CKeyIbT3vXI)

also moving particles from a text (p5.js)

[![](https://img.youtube.com/vi/4hA7G3gup-4/hqdefault.jpg "Coding Challenge #59: Steering Behaviors") ](https://www.youtube.com/watch?v=4hA7G3gup-4)

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!

---

<div class="post-metadata">

**Author:** ![p\_a](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@p\_a](https://discourse.processing.org/u/p_a)\
**Post date:** [April 3, 2021, 12:01pm UTC](https://discourse.processing.org/t/svg-element-explosion/29083/9 "2021-04-03T12:01:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 3, 2021, 12:54pm UTC](https://discourse.processing.org/t/svg-element-explosion/29083/10 "2021-04-03T12:54:45Z")

</div>

@p_a ,

> [@p\_a](#):
>
> it seems quite laborious

Only at first…

Check out some of the examples:  
_[Examples / Processing.org](https://processing.org/examples/)_

The _Motion_ and _Simulate_ topics may be of interest.

`:)`