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. So, how are they made? Just crack open an illustration app and go for it, right? Sure, that’s cool. But we’re in a post here on CSS-Tricks, and it would be much more fun to look at the possibilities we have to do this with CSS and SVG — two of our favorite ingredients! We actually have a few ways to go about blobs. Let’s check them out. Drawing circles in SVGLet’s start easy. We can draw SVG in something like Illustrator, Sketch, Figma or whatever, but we’re going to draw in SVG code instead. SVG makes it pretty trivial to draw a circle, thanks to the appropriately named
Those funky attributes? They make sense once you break them down:
That snippet creates a circle with a 40px radius with its center at 100px on the x-axis and 100px on the y-axis. The coordinates start from the upper-left corner of the parent container. Let’s create multiple overlapping circles like this:
But blobs aren’t always so perfectly… round. We can mix things up by using
This is nearly identical to the circle except the change in tag name and two radii values to define the horizontal ( And, if all you need is a circle, we could probably lean on CSS without SVG at all. Any box element can become a circle or ellipse with
…but more on that later. Freestyling with SVG pathsThanks to SVG’s There are many data parameters in path for different tasks like:
Chris has a super thorough guide that explains these parameters in great detail. We just need the curve ( Ready to break this down? Coordinates play a big role in Take this…
Here, the
It shows that our path starts from coordinates Let’s use this knowledge to design our blob. The blob I drew is actually a bit complex, with a number of curves and control points. It doesn’t help that many of the coordinates aren’t full integers. But, still, now that we know what the But, hey, I get it. That’s a lot of code to not only write by hand, but get exactly right as well. I wouldn’t fault you for using something like this tool to generate the code for you. Gooey effects with CSS and SVG filtersSVG path is complex. Right? What if I present you a way to convert many custom shapes (which you can create through divs) into gooey blobs? Here’s the idea. We’re going to create two rectangles that intersect. They’re the same color, but have a little transparency to darken where they intersect. Then we’re going to leverage SVG’s blurring features to smudge the rectangles, creating an extra gooey blob with softer edges. The two intersecting rectangles will turn into this – Let’s first understand how filters work in SVG. They are declared using
Our blob is blurred and colored, so that’s why we’re going to put
After playing around a bit, here’s where I landed on the
This goes right in the HTML markup with an ID that we call on the parent element of our blob:
The filter doesn’t actually render, even though it’s in the markup. Instead, we reference it as a CSS filter on the blob’s parent element:
This isn’t done just yet. The blur is scattered and the element’s shape lost its boundary and color. We need a bulging effect with blur on the boundaries and a solid color to fill the shape. This is where our next SVG filter, There are two
The
Let’s get a little numbers nerdy here. In that equation,
Here, Breaking this down further… We have a color pixel with an RGBA value of
The pixel value didn’t change because we multiplied it by the identity matrix, but if you change the values of the matrix, then its pixel value will change too. Learn more about In our case, these values seem to work pretty well:
I’ve added few more styles in the blob to stretch it from the corner. Try to use these filter values in other shapes and let me know how they work out for you in the comments. Using CSS border-radiusWe teased this earlier, but now let’s get to the CSS You might be used to using
That’s a nice way to get uniformity for all of the corners. But blobs aren’t so uniform. We want some corners to be rounder than others to get some that looks gooey. That’s why we go for the constituent properties of
And see how each properties takes two values? That’s one for each edge of the corner, giving us a lot of flexibility to curve an element into interesting shapes. Then we can drop in a background color, fill it up with a gradient, or even set a The post Three Ways to Blob with CSS and SVG appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter. Three Ways to Blob with CSS and SVG published first on https://brightcirclepage.tumblr.com/ via Tumblr Three Ways to Blob with CSS and SVG
0 Comments
Leave a Reply. |
About Us
|