SVG & Shape

An organic blob continuously changes its outline.

Add a "Blob Morph" loop animation (also called a morphing blob or animated blob) to [where].
An organic blob should keep slowly changing its outline while turning gently, smooth and soft with no sharp corners.
Make the loop seamless so the shape never jumps, and keep it still for users who prefer reduced motion.

Nearby shapes blend into each other like liquid blobs via blur and contrast filtering.

Add a "Gooey Effect" (also called a goo effect or metaballs) to [where].
When the pointer is over it, small blobs should pull away from the main shape, stretching like liquid before breaking free, and flow back and merge smoothly when the pointer leaves.
Apply the blur-and-contrast filter only to the small group of shapes, not the whole page, and show the same effect on keyboard focus and tap.

An icon such as a hamburger menu turns into another (X) with bars rotating and moving.

Add an "Icon Morph" (also called hamburger to X or a menu icon morph) to [where].
On each press, the top and bottom bars should first slide together to the middle and then rotate into an X while the middle bar fades out, and pressing again reverses it: quick and snappy.
Make it a real toggle button whose accessible label and expanded state change with it, and keep the icon's size fixed so nothing around it shifts.

An SVG stroke appears to be drawn along its path as the dash offset animates.

Add a "Line Drawing" animation (also called path drawing or a self-drawing SVG) to [where].
Each stroke should appear to draw itself smoothly along its path from start to end, with a second stroke such as a checkmark following right after the first.
Play it once when it comes into view rather than looping, and show the fully drawn lines to users who prefer reduced motion.

An element travels along a custom curved path and can rotate to follow it.

Add a "Motion Path" animation (also called animate along path) to [where].
A small element should travel along a custom curved route at a slow, steady pace, turning to face the direction it is moving.
Use a closed route so the loop repeats without a jump, and make the route scale with its container instead of staying at a fixed size.

Small circles or icons revolve around a centre on circular paths.

Add "Orbiting Circles" (also called an orbit animation or orbiting icons) to [where].
Small circles should revolve slowly and steadily around a central element on circular rings, with the outer ring turning the other way and more slowly.
Keep the loop seamless and the orbiting items upright, and stop the rotation for users who prefer reduced motion.

One vector shape smoothly turns into another shape.

Add a "Shape Morph" (also called path morphing or SVG morph) to [where].
One shape should smoothly turn into another, for example a pentagon pinching into a star, with its points gliding into place at an even, unhurried pace.
Give both shapes the same number of matching points so the morph stays clean without flicker, and play it once per state change rather than looping.

An SVG filter warps text or shapes with animated noise.

Add an "SVG Displacement Distortion" hover effect (also called a displacement map effect) to [where].
While the pointer is over it, the text or shape should ripple and wobble as if seen through moving water, fading in softly, and return to crisp when the pointer leaves.
Apply the distortion filter only while the effect is active so it costs nothing at rest, and show the same effect on keyboard focus.

A masked shape wipes or follows the pointer to uncover content beneath.

Add an "SVG Mask Reveal" hover effect (also called a clip-path reveal or spotlight mask) to [where].
While the pointer is over it, a circular mask should grow from the center and uncover the content underneath, then close again when the pointer leaves: smooth and fairly quick.
Keep both layers exactly the same size so nothing shifts, and show the same reveal on keyboard focus and tap.