Create Animated Blobs With jQuery - Blobinator

Blobinator is a jQuery plugin to generate animated blobs using SVG, which can be used as a modern and eye-catching background for your webpage.

How to use it:

1. Load the minified version of the Blobinator plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/blobinator.min.js"></script>

2. Create a container element with the CSS class of 'blobinator'.

<div class="blobinator">
  
</div>

3. Specify the number of blobs to generate.

<div class="blobinator"
     data-total="10">
</div>

4. Set the color of the blobs. Can be either a single value or a list of values separated by space.

<div class="blobinator"
     data-total="10"
     data-color="#27ae60">
</div>

<!-- OR -->
<div class="blobinator"
     data-total="10"
     data-color="#27ae60 #c0392b #8e44ad #2980b9 #138d75 #d4ac0d #d35400 #273746">
</div>

5. Configy the duration of the animation. Default: 15.

<div class="blobinator"
     data-total="10"
     data-color="#27ae60"
     data-animation-duration="5">
</div>

---

This awesome jQuery plugin is developed by prathamVaidya. For more Advanced Usages, please check the demo page or visit the official website.