<p>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. </p>
<p>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! </p>
<p>We actually have a few ways to go about blobs. Let’s check them out. </p>
<p>Drawing circles in SVG </p>
<p>Let’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. </p>
<p>SVG makes it pretty trivial to draw a circle, thanks to the appropriately named element: </p>
<p>Those funky attributes? They make sense once you break them down: </p>
<p>cx defines the x-coordinate of center of circle.cy defines the y-coordinate.r is the radius.fill is used to fill the shape with color. </p>
<p>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. </p>
<p>Let’s create multiple overlapping circles like this: </p>
<p> acts as the art board where all the different shapes and figures are drawn. So, its height and width indicates the size in which the whole drawing needs to be enclosed. If some part of figure is out of bounds of the SVG’s size, then that part will be truncated. </p>
<p>CodePen Embed Fallback </p>
<p>But blobs aren’t always so perfectly… round. We can mix things up by using instead of : </p>
<p>This is nearly identical to the circle except the change in tag name and two radii values to define the horizontal (rx) and vertical (ry) radii separately. The funny thing is that we can still get a perfect circle if we want if the radii values are the same. So, in a sense, is a little more versatile. </p>
<p>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 border-radius. </p>
<p>.circle {<br />
border-radius: 50%;<br />
height: 50px;<br />
width: 50px;<br />
} </p>
<p>…but more on that later. </p>
<p>Freestyling with SVG paths </p>
<p>Thanks to SVG’s tag, we can create any kind of shape. It is like drawing with a pencil or pen. You start from a point and draw lines, curves, shapes and close the loop. </p>
<p>There are many data parameters in path for different tasks like: </p>
<p>M – Moving to the pointL – Drawing lineC – Drawing a curveQ – Bézier curveZ – Closing the path </p>
<p>Chris has a super thorough guide that explains these parameters in great detail. </p>
<p>We just need the curve (C) parameter for the actual drawing. But we’ll also be moving the starting point and closing the path, so we’ll reach for the M and Z parameters as well. </p>
<p>This is a random blobby shape I put together using SVG’s element. </p>
<p>Ready to break this down? Coordinates play a big role in so what we’re about to look at will look like Google Maps data barfed inside our code. But it makes a lot more sense when we know what they’re doing. </p>
<p>Take this… </p>
<p>Here, the d attribute stores the path data. It holds information containing where the drawing starts, what direction it moves, what shape it follows, and where it ends. For example: </p>
<p>It shows that our path starts from coordinates 10 10, indicated by the M that precedes them. Then, it establishes a Cubic Bézier curve (C) with two control points. Bézier curves are like handles on the both ends of a path that control the curviness between them. We have two Bézier “handles”: one for starting position (20 20) of the curve and another for ending position (40 20). </p>
<p>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 ‘s d parameter does and the attributes it uses to draw points along the path, it doesn’t look quite as scary. </p>
<p>CodePen Embed Fallback </p>
<p>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. </p>
<p>Gooey effects with CSS and SVG filters </p>
<p>SVG 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. </p>
<p>CodePen Embed Fallback </p>
<p>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 – </p>
<p>Let’s first understand how filters work in SVG. They are declared using on HTML elements or other SVG elements, like circle. </p>
<p>circle {<br />
filter: url(“#id_of_filter”);<br />
} </p>
<p> is basically a wrapper for the actual filter effects, that include: </p>
<p>Many more… Get the complete list here. </p>
<p>Our blob is blurred and colored, so that’s why we’re going to put and to use. </p>
<p> takes multiple attributes, but we are only interested in two of them: how much blur we want and where we want it. The standard deviation (stdDeviation) and in properties align with those needs, respectively. </p>
<p>in accepts one of two values: </p>
<p>SourceGraphic – Blurs the entire shapeSourceAlpha – Blurs the alpha value, and is used to create shadow effects </p>
<p>After playing around a bit, here’s where I landed on the effect: </p>
<p>This goes right in the HTML markup with an ID that we call on the parent element of our blob:</p>
