Fun With Blobz by Torus Kit
Have you seen all those blobs that are so popular in web design? While browsing the web, I found a website that offers free code for creating your own custom blobs, which they call blobz. What makes this site different from the other "blob generator" sites is that these blobz are easily customized and they can be animated too.
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.
This 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.
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/#
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/#
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
