Exploring the CSS Paint API: Blob Animation

This article delves into creating captivating blob animations using the CSS Paint API. While traditionally achieved with SVG, the Paint API offers a powerful CSS-based alternative, though currently limited to Chrome and Edge.

This is part two of a series:

• Part 1: Image Fragmentation Effect
• Part 2: Blob Animation (This article)
• Part 3: Polygon Border
• Part 4: Rounding Shapes

Let's build a blob. Understanding the <canvas></canvas> approach first clarifies the process:

A blob is essentially a distorted circle. We define 'N' points around a circle. Using trigonometry, we calculate each point's coordinates (green points in the illustration). Cubic Bézier curves connect these points, requiring a start point, control point, and end point (red points). Red points are midpoints between green points.

By adjusting the control points (green points), we shape the blob. Offsetting each point randomly towards the center creates the blob effect.

This shape then becomes a mask for an image using the CSS Paint API. Square elements (width equals height) are ideal, with the radius being half the width/height. A CSS variable (N) controls the point count.

Animating the blob involves smoothly shifting point positions. A simple animation transitions from a circle to a blob by changing one point's position. A CSS variable (--b) with a transition is used. On hover, --b changes, moving the point and creating the animation. Extending this to multiple points (even-numbered ones, for example) creates more complex animations.

Introducing randomness: Instead of fixed point movement, random offsets create dynamic animations. A variable (T) acts as a boolean switch between uniform and random configurations. A custom random() function with a controllable seed ensures consistent random sequences.

Controlling point movement: We can manipulate the x and y coordinates independently for diverse animations. For example, setting one coordinate to zero creates one-axis movement (horizontal or vertical). Directional movement (left or right) requires grouping points based on their angle and applying different signs to their offsets. Adjusting the circle's size prevents points from exceeding the mask area. A wrapper with negative margins ensures the hover area matches the visible blob.

Combining animations: Keyframes and cubic-bezier() functions enhance animations. A sinusoidal curve creates a wobbling effect. Transforms add sliding effects.

Circular movement: Points orbit their initial positions, creating continuous animations. The maximum orbit radius prevents overlap.

Spiral movement: Combining circular and center-converging movements creates spiral animations. Two animation variables (B and Bo) control the orbit and point movements respectively.

Summary:

• N: Number of points (controls detail).
• T: Movement type (uniform or random).
• Seed: For random configurations.
• Na: Nature of movement (center-convergence, one-axis, circular, spiral, etc.).
• B (and Bo): Animation variable(s).
• V: Maximum value of B (controls shape area).

The code structure is straightforward: CSS variables control parameters, and JavaScript functions (Fx, Fy, A) define the animation logic. The CSS applies the mask and animates the B variable.

This concludes the exploration of blob animations with the CSS Paint API. Experiment with the CSS variables to create countless variations.

The above is the detailed content of Exploring the CSS Paint API: Blob Animation. For more information, please follow other related articles on the PHP Chinese website!