Stroke Text Draw

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 outlined word gets filled or lit by a gradient that follows the pointer or sweeps across.

Add a "Text Hover Effect" (also called text fill on hover or gradient outline text hover) to [where].
The word should start as an outline, and while the pointer is over it a solid fill should sweep in smoothly from left to right, then draw back out when the pointer leaves.
Keep the outlined word readable before the fill, and show the same effect on keyboard focus.

Letters fill with a rising, waving liquid.

Add a "Liquid Fill Text" effect (also called water fill text) to [where].
The outlined letters should fill with liquid whose wavy surface rolls sideways while the level slowly rises and falls, in a soft, continuous loop.
Keep the word available as real text for screen readers, and hold the liquid at a still level for users who prefer reduced motion.

Letters or words rotate around an axis in 3D to show the next text on their back side.

Add a "Text 3D Flip" hover effect (also called 3D flip text reveal) to [where].
When the pointer is over the text, each letter should roll over on its horizontal axis in 3D to show a new letter on its other side, one after another in a quick, smooth sweep, and roll back when the pointer leaves.
Keep the text box the same size during the flip, and show the same effect on keyboard focus.

Text warps and ripples organically, driven by scrolling or pointer movement.

Add a "Text Distortion" effect (also called organic text distortion) to [where].
A row of text should flow sideways endlessly and warp and ripple organically as it moves, as if seen through moving water, with the flow driven by the user's scrolling.
Keep the distortion light enough that the text stays legible, keep it smooth on slower devices, and turn it off for users who prefer reduced motion.

Words fade in sequentially on page load, often with a blur clearing, as if being generated.

Add a "Text Generate" effect to [where].
The words should fade in one after another while a soft blur clears from each, as if the text is being generated: steady and calm.
Play it once on load, let screen readers read the full text right away, and show it without motion for users who prefer reduced motion.