Fun With Blobz by Torus Kit
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--time
This controls the duration for the looped animation
The default duration is 30 seconds
This controls how much the blobz will transform (change shape)
The default change is 2
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 BlobzThe 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
Editor's Picks Articles
Top Ten Articles
Content copyright © 2021 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.