nuance is partially a result of the fact that web-based animation primarily deals with solid,
rectangular shapes. (Sometimes they have rounded corners, but the shapes nonetheless
remain solid and whole.) Animating the individual shapes of an element instead lets you
delight the user with motion design that she might not have realized was even possible.
Beyond novelty, you can also uniquely leverage SVG animation to transform shapes
into brand-new ones. Pairing this with the techniques for previewing outcomes and
flowing from the triggering element, you can use graphic transformations to indicate UI
behavior and provide feedback to the user. For example, if hovering over the dots in a
loading indicator causes those dots to rearrange themselves into an X shape, that would
indicate to the user that clicking the status indicator graphic would cancel the loading of
content.