Waterpipe.js is the jquery plugin using this, We can make nice water pipe background and smoky backgrounds, There are many options to change the background color and many more.


Waterpipe Background Example


example

<!DOCTYPE html>
<html>
    <head>
        <title>Jquery Waterpipe Background Example</title>
        <style>
            #bg-wrapper{
                width: 100%;
                height: 600px;
            }
        </style>
    </head>
    <body>
        <div id="bg-wrapper">
            <canvas></canvas>
        </div>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
    <script src="https://dragdropsite.github.io/waterpipe.js/waterpipe.js"></script>
    <script>
        var smokyBG = $('#bg-wrapper').waterpipe({
            gradientStart: '#000000',
            gradientEnd: '#222222',
            smokeOpacity: 0.1,
            numCircles: 1,
            maxMaxRad: 'auto',
            minMaxRad: 'auto',
            minRadFactor: 0,
            iterations: 10,
            drawsPerFrame: 7,
            lineWidth: 2,
            speed: 0,
            bgColorInner: "#ffb606",
            bgColorOuter: "#666666"
        });
    </script>
</html>


Output: