Animated Fireworks Logo

Animated logo for an an internal tool called Fireworks. The logo is meant to resemble a geometrically simplified firework exploding in the air.

The animation is created entirely in HTML and CSS (no images). The logo is rotated along the x and y axes to give a sense of depth and perspective. To achieve a consistent gradient across all sections, each element has the same radial gradient with a unique background-position applied. Opening and closing the logo spins the outer rings in and out of the center.

View on codepen: http://codepen.io/supermanic/pen/MwQpLg