Blob Morph

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.

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.