Blobs

Pure CSS Animated Blobs

Introduction

Blobs are the smooth, random, jelly-like shapes that have a whimsical quality and are just plain fun. They can be used as illustration elements and background effects on the web.

Install

Place the downloaded blobs.css or blobs.min.css file to your assets folder, that add a link into the tag.
<link rel="stylesheet" href="assets/css/blobs.min.css">

Include via CDN

When you only need to include Blobs compiled CSS, you can use jsDelivr, just add a link into the tag.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pixel-s-lab/blobs@main/dist/css/blobs.min.css">
Settings
Blobs tool is using CSS custom properties (aka CSS variables), so it is super easy to customize them. These settings can be placed as inline style or in separate <style> definition.</p> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>--time</td> <td>string</td> <td>30s</td> <td>Time of animation loop in seconds or milliseconds</td> </tr> <tr> <td>--amount</td> <td>int</td> <td>2</td> <td>Amount (size) of deformation</td> </tr> <tr> <td>--fill</td> <td>string</td> <td>#000</td> <td>Fill color of blob</td> </tr> </tbody> </table> <h2 id="default-settings">Default settings</h2> <div class="codehilite"><pre><span></span><code><span class="nt">&lt;div</span><span class="w"> </span><span class="na">class=</span><span class="s">&quot;px-blob&quot;</span><span class="nt">&gt;</span> <span class="w"> </span><span class="nt">&lt;svg</span><span class="w"> </span><span class="na">xmlns=</span><span class="s">&quot;http://www.w3.org/2000/svg&quot;</span><span class="w"> </span><span class="na">viewBox=</span><span class="s">&quot;0 0 747.2 726.7&quot;</span><span class="nt">&gt;</span> <span class="w"> </span><span class="nt">&lt;path</span><span class="w"> </span><span class="na">d=</span><span class="s">&quot;M539.8 137.6c98.3 69 183.5 124 203 198.4 19.3 74.4-27.1 168.2-93.8 245-66.8 76.8-153.8 136.6-254.2 144.9-100.6 8.2-214.7-35.1-292.7-122.5S-18.1 384.1 7.4 259.8C33 135.6 126.3 19 228.5 2.2c102.1-16.8 213.2 66.3 311.3 135.4z&quot;</span><span class="nt">&gt;&lt;/path&gt;</span> <span class="w"> </span><span class="nt">&lt;/svg&gt;</span> <span class="nt">&lt;/div&gt;</span> </code></pre></div> <p>## Customized settings<br> Custom settings for --time, --amount and --fill</p> <div class="codehilite"><pre><span></span><code><span class="w"> </span><span class="nt">&lt;div</span><span class="w"> </span><span class="na">class=</span><span class="s">&quot;px-blob&quot;</span><span class="w"> </span><span class="na">style=</span><span class="s">&quot;--time: 20s; --amount: 5; --fill: #56cbb9;&quot;</span><span class="nt">&gt;</span> <span class="w"> </span><span class="nt">&lt;svg</span><span class="w"> </span><span class="na">xmlns=</span><span class="s">&quot;http://www.w3.org/2000/svg&quot;</span><span class="w"> </span><span class="na">viewBox=</span><span class="s">&quot;0 0 747.2 726.7&quot;</span><span class="nt">&gt;</span> <span class="w"> </span><span class="nt">&lt;path</span><span class="w"> </span><span class="na">d=</span><span class="s">&quot;M539.8 137.6c98.3 69 183.5 124 203 198.4 19.3 74.4-27.1 168.2-93.8 245-66.8 76.8-153.8 136.6-254.2 144.9-100.6 8.2-214.7-35.1-292.7-122.5S-18.1 384.1 7.4 259.8C33 135.6 126.3 19 228.5 2.2c102.1-16.8 213.2 66.3 311.3 135.4z&quot;</span><span class="nt">&gt;&lt;/path&gt;</span> <span class="w"> </span><span class="nt">&lt;/svg&gt;</span> <span class="nt">&lt;/div&gt;</span> </code></pre></div> </style>