css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Click to explode. The logo is built with 3D CSS3 particles for a nice explosion. Created for the getfirebomb.com website.


  1. great stuff, but seems like WAAAY too much js for explosion.

  2. The JS reads in a GIF and outputs the divs to re-create the pixel art of the bomb GIF. Then you've got the randomized falling sparks. And then you've got the randomized explosion itself. And you've got to take into account the shape of the explosion... you want it to be roughly spherical or it just ends up looking like random confetti noise.

    I look forward to seeing your fork with WAAAY less js. ;)

  3. I wish I could :) I was just wondering what happens if you lets say create bomberman type game, and you have to have 100 of those bombs per view, would it bog down the system?

  4. Well, at some point using 3D CSS3 particles you're going to hit a number of them where things start getting bogged down. WebGL or even 2D canvas would be better choice for a game with lots of explosions for that reason. That said, lengthy JS doesn't necessarily mean slower or more resource hungry. I'm actually recycling particles to conserve resources in my JS code, which makes the code longer but easier on memory.

    Pre-baking an explosion into a CSS3 animation would also probably be more efficient, but then you'd lose the randomness.

    Also, in this particular example the logo itself explodes into particles directly... in a game you just need have some explosion particles or effects rather than having a precise arrangement of pixels explode outward... although, now that makes me want to feed an 8-bit video game sprite into this code and blow THAT up. :p

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.