Use the link below to visit the website. Let's take a look around. At the top, we see some animated blobz, welcoming us to the website. Below that begins the documentation for how to use the free blobz code.
From the short documentation, we learn that we have three CSS custom properties (or CSS variables) that we can use to customize our blobz. You have the option to use the custom properties as inline CSS styles or place them in the <style> section in the <head> section.
What Can Be Customized
--timeThis controls the duration for the looped animation
The default duration is 30 seconds
--amount
This controls how much the blobz will transform (change shape)
The default change is 2
--fill
This controls the color for the blobz
The default color is black
Moving downward, there are two code examples. The first example code demonstrates the default settings and the second shows how to use custom values for the custom properties discussed above.
Finally at the bottom, we have the Gallery, which contains several blobz. Just click on a blobz, to copy the code for that blobz to your clipboard.
How to Use Blobz
The blobz and their animation are controlled by CSS. The author supplies his/her stylesheet as a free download. So your first step is to click the Download button at the top of the page, to download the code.Once downloaded, place the code in your assets/css/ folder or the folder of your choice. But if you do use a custom folder, don't forget to change the path to the .css file in the following <link> code.
In the <head> section, add this link that will reference the blobz.min.css file.
<link rel="stylesheet" href="assets/css/blobz.min.css">
Once you copy the code for a blobz from the webpage, paste it in to your webpage code.
If you take a look at the code, you will see that the blobz is wrapped in a div with the CSS class tk-blob. Also in this div is the style for the fill color. Inside the opening and closing divs we have the code for drawing our blobz as an SVG. All those numbers represent anchor points on the SVG path.
Blobz by Torus Kit
https://toruskit.com/tools/blobz/#