Overview
Ever wanted to make a levitating blob on your webpage? Maybe you're familiar with one approach but curious about a better method. This article outlines a few optimal techniques for rendering a gooey blob on your site.
Static Blobs
First, let's talk about blobs that don't move. They are plain SVGs and they are super easy to generate.
You can just Google for "Blob SVG" and you will come across some great blob generators. The one I loved most was created by MagicPattern and you can use it by clicking here.
Simple Animated Blobs
There are several tools to generate animated blobs that will infinitely loop a simple animation. You can generate them as SVGs or as GIFs.
As SVG
This tool allows you to create beautiful blobs that you can export as SVG or copy-paste directly into your code. They are extremely efficient as they render using SVGs and not any separate asset files.
As GIF
If for some reason you prefer your blob to be animated in a GIF, you can use this tool to customize your perfect blobs and export them as GIFs.
Customized Gooey Effects
If your requirement is a little more complicated than just a floating blob with a looping animation, you can use HTML and CSS to create a gooey effect.
You can search for "Gooey effect CSS" on Google or CodePen to find a variety of inspirational code snippets.
You can also go through this website by CSS-TRICKS which discusses all the ways to create this effect in CSS while detailing the drawbacks of this method.
Gooey React
This one is for you React fanboys.
It's a library that simplifies all the work for you and abstracts the implementation of this amazing effect into a React component. It's the simplest way of creating optimized gooey effects on your React app that are fast, smooth, and very appealing to look at while also being extremely easy to implement.
It also takes care of browser compatibility issues which you may have to deal with if you want to implement this effect yourself.
Here are the docs for this library and be sure to check out the examples section for some great ideas.
The End
Welp, that's the end of it.
If you know of any more ways of creating this great effect or something that can complement this on a web app, then let us know in the comments.
If you like this article then consider following me on Hashnode.
Top comments (0)