AmirAsghary / confetti-css-worklet

CSS Confetti Paint Worklet

Welcome to CSS Confetti Paint Worklet 👋

confetti generator worklet for CSS

🏠 Homepage

✨ Demo

Usage

Import it as a script.

<script>
    // feature detection
    if ("paintWorklet" in CSS) {
      // importing types (optional)
      const confettiTypesScript = document.createElement("script");
      confettiTypesScript.setAttribute("type", "module");
      confettiTypesScript.setAttribute("src", "src/types.js");
      document.body.appendChild(confettiTypesScript);  

      // adding the worklet
      CSS.paintWorklet.addModule("./src/worklet.js");
    } else {
      // do something if the feature doesn't exist on the user's browser
    }
</script>

Then in your css selector you can write:

background-image: paint(confetti);

You can control the confetti generation variables:

--confetti-dimentions: 10px 20px;
--confetti-padding: 20px;
--confetti-amount: 50;  

Author

👤 Amir Asghary

• Github: @AmirAsghary
• LinkedIn: @AmirAsghary

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!