Icon 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.

The copy icon morphs into a checkmark and the label reads Copied for a moment.

Add a "Copy-to-Clipboard Feedback" animation (also called a copied state or copy icon to checkmark) to [where].
When the copy button is pressed, the copy icon should quickly shrink away as a checkmark draws in and the label changes to "Copied", then everything eases back after a short moment.
Keep the button the same size during the swap so nothing shifts, and announce the copied state to screen readers.

An eye icon switches between open and slashed as the password text is shown or hidden.

Add a "Password Reveal Toggle" (also called show/hide password or an eye icon toggle) to [where].
Pressing the eye should quickly wipe away its slash as the hidden dots crossfade into the real characters, and pressing again draws the slash back and hides them: smooth and quick, with no bounce.
Keep the field width steady so the text does not jump, and make the toggle a real button whose label says whether the password is shown.

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.