Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including generate-confetti with all npm packages installed. Try it out:

var generateConfetti = require("generate-confetti")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

generate-confetti v1.0.0

Random particle generator

Confetti

Confetti is the small object or streamers of colored objects that are scattered around the website.

What's new in this module

In most of the confetti modules, we are allowed to generate only some objects(circle, rectangle, triangle) in HTML canvas.But in this module, we can include any object by providing the SVG image of an object.Object Rotation, Size, and Opacity are possible in a random manner.

  • No dependencies

Options

rows
  • How many objects need to displayed in a row. eg. row : 10 ,row : 20
columns
  • How many objects need to displayed in a column.
Opacity
  • To set random Opacity for an object between 0 to 1 (default:"false")
Size
  • To set random size for an object (default:"false")
Rotation
  • To set random rotation effect for an object (default:"false")
Icons
  • Include the path of the svg image in an array
Color
  • To set color hex value for an object

Examples

    <div class="confetti"></div>
    <div class="confetti"></div>

    var confetti = {
    rows: 20,
    columns: 20,
    Opacity: true,
    Size: true,
    Rotation: true,
    Icons: [
      './confetti/Ellipse.svg',
      './confetti/Vector.svg',
      './confetti/Line.svg',
      './confetti/Polygon.svg',
      './confetti/Text.svg',
      './confetti/Star.svg'
    ],
    Color : ['#4DA1DA', '#FFFFFF', '#EB7265', '#EB7265', '#A4D77C']
  };
  generateConfetti('.confetti',confetti);

You can install it with :

    npm install generate-confetti --save

or

Clone the repo.Include this files.

<script src="./js/app.js"></script>

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free