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

A vanilla.js canvas confetti animation. Move the mouse to change direction.


  1. love it! but it's a little too fast.. would be awesome if it was a bit slower..

  2. Thank you both! I made it a bit slower.

  3. Awesome, work ;) Hehe, would be sweet to have on a site counting down to an event. If your on the site while the time changes over, the confetti starts to rain down. Very cool dude.

  4. Thanks, Jack! :)

  5. PI_2 = 0.6*Math.PI :D

  6. What part of the code can I adjust to slow down the speed?

  7. how i remove webgl related problem for this script ?????

  8. I have a business proposal for you. shoot me an email and i will explain.. msalehi@astound.net

  9. We have officially launched MySolace on July 15th. We have sent you an email to allow us to include your designs in our background model marketplace. However, we have not received any reply back.

    To see how your designs can augment MySolace and financially benefit you in the long run; please visit www.mysolace.com/mysolace, click on designs menu, and select any one of the background models. If you would like to participate, you can create a free account, setup your profile and your contributor biography, and send us an email to include your designs in our marketplace. We will incorporate the designs and assign them to your account.

    MySolace Operational Manager Masoud Salehisedeh

  10. Hey great pen! I've spend last 20 min trying to figure out how to swap out circles into small rectangles, but had no luck. Pretty sure I have to edit drawCircle, tried swaping .arc.. to .rect(20, 20, 20, 30) but that causes weird effect with just one rectangle

  11. Loving this man! But can you please help me in applying this on multiple canvases on the same page? It seems it's only for 1 canvas element. A little help? Thanks man.

  12. Is it OK if we use this wonderful confetti on our site? With credit of course!

  13. @dougw sure, go for it!

  14. Thank you... Sign up at http://withcopper.com and you'll see the confetti with credit!!

  15. @bsebastian86 you could either try using multiple iframes, or update the Confetti class to accept context as an argument and use a Confetti instance for each canvas on the page

  16. Alexis @AlexisTheGreek on

    I love this! Saw it on the Creative Mornings website and had to track it down. Is it possible to add this to a Squarespace website? And how would you want to be credited?

  17. @AlexisTheGreek sure, go for it! a link or comment about the codepen would be great

  18. Anyone figured out how to make these bad boys rect?

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

You must be logged in to comment.