Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    generate-confettipublic

    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>
     

    install

    npm i generate-confetti

    Downloadsweekly downloads

    3

    version

    1.0.0

    license

    ISC

    repository

    githubgithub

    last publish

    collaborators

    • avatar