CSS in SVG in CSS: Shipping confetti to Stack Overflow’s design system
Quite often in our product, we’ll have celebratory popovers or modals. Congrats. You did the thing! Good job! You got the feature! Hooray!
The first time we needed to show some confetti, we simply included a statically rendered SVG of confetti in the background, did our best to position it out of the way of the text, and moved on with our lives. It looked like this:
Just mere months later, we found this same approach taken 12 times throughout our product. Each iteration was slightly different. Soon we had other variations like confetti-bold.svg.
We ought to be consistent in our approach to confetti that’s reusable, portable, and perhaps most importantly, documented. Time to formalize!
As many Stack Overflow users know, the best way to get started is to build off a good example. Thankfully, there are lots of examples of confetti in products across the internet. Apps like Bamboo use it for anniversaries and birthdays. Carta uses confetti to celebrate exercising options.
Some are rendering things in JavaScript, others as animated gifs. There are some that are rendering entire WebGL scenes in Three.JS.
