zalo / Bang

Create Animated SVGs in your browser!

Instructions

• Left Click: Draw a brush stroke
• Middle Click: Move a brush stroke, segment, or shape
• Right Click: Erase a stroke, segment, or shape
• Ctrl-Z/Ctrl-Y: Undo/Redo the last action
• Brush Width: Change the width of the brush
• Prev/Next: Navigate the playhead forward and backward one frame
• Duplicate: Either creates a new frame with the contents of this frame (or copies the content from the last frame)
• Delete: Either clears the current frame, or (if empty) removes the frame from the timeline
• Load from SVG: Loads a prior session or an arbitrary foreign SVG
• Save to SVG: Saves this session as an animated SVG (preserving undo)
• Play: Toggles showing an example SVG that demonstrates how it will look when exported

About

Bang is a flash-inspired tool for creating animated vector graphics.

It attempts to recreate some of the functionality of .swf's using clever CSS embedded within the .svg.

License

Bang is open-sourced under the MIT License.

Credits

Bang is based on the amazing paper.js by @lehni and @puckey.

.gif Export made possible with @jnordberg's .gif.js.