Three Ways to Blob with CSS and SVG

Blobs—those smooth, organic shapes—add a playful touch to web design, perfect for illustrations and background effects. While illustration software is an option, let's explore the fun of creating blobs using CSS and SVG.

Here are three approaches:

1. SVG Circles and Ellipses

The simplest method involves overlapping circles and ellipses in SVG. SVG's <circle></circle> element is straightforward:

<circle cx="100" cy="100" fill="red" r="40"></circle>

• cx and cy: Define the circle's center coordinates.
• r: Specifies the radius.
• fill: Sets the fill color.

Multiple overlapping circles create a basic blob:

<svg height="300" width="300">
  <circle cx="80" cy="80" fill="red" r="40"></circle>
  <circle cx="120" cy="80" fill="red" r="40"></circle>
  <!-- ...more circles... -->
</svg>

For more variety, use <ellipse></ellipse> to control horizontal and vertical radii independently:

<ellipse cx="200" cy="80" fill="red" rx="100" ry="50"></ellipse>

While simple, this method might lack the organic feel of true blobs.

Alternatively, for basic circles, CSS can suffice:

.circle {
  border-radius: 50%;
  height: 50px;
  width: 50px;
}

2. SVG Paths for Complex Shapes

For intricate blob designs, SVG's <path></path> element offers ultimate control. It allows drawing lines and curves using commands like:

• M: Move to a point.
• L: Draw a line.
• C: Draw a cubic Bézier curve.
• Z: Close the path.

A detailed explanation of these commands can be found in Chris Coyier's comprehensive guide. Creating complex paths manually can be tedious, so consider using tools to generate the path data. For example:

<path d="M10 10 C 20 20, 40 20, 50 10 Z" fill="red"></path>

This path starts at (10, 10), curves to (50, 10), and closes the shape.

3. CSS and SVG Filters for Gooey Effects

This technique leverages SVG filters to create a "gooey" effect from intersecting shapes. We'll use two overlapping rectangles with transparency, then apply SVG filters for blurring and color manipulation.

SVG filters are defined using <filter></filter> and applied via CSS:

<svg style="position: absolute; width: 0; height: 0;">
  <filter id="goo">
    <fegaussianblur in="SourceGraphic" stddeviation="30"></fegaussianblur>
    <fecolormatrix in="blur" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -7"></fecolormatrix>
  </filter>
</svg>

The feGaussianBlur blurs the shape, and feColorMatrix adjusts the color. The filter is then referenced in CSS:

.blob-container {
  filter: url("#goo");
  /* ...other styles... */
}

This approach offers a unique, easily customizable gooey blob effect. Experiment with different filter values to achieve the desired look.

Remember to adjust the values and parameters to fine-tune the shape and appearance of your blobs in each method.

The above is the detailed content of Three Ways to Blob with CSS and SVG. For more information, please follow other related articles on the PHP Chinese website!