Morphing icons

This skill builds or reviews icons that morph by moving the same three SVG lines. Any icon can become any other because the line count never changes.

Every check is a pair. The broken line sits beside the line that replaces it.

Exactly three lines is required. A 14 viewBox is the published coordinate system, with center 7. A two-line check that omits the third line is a finding. Press and hover timing for buttons around the icon belongs to timing-functions. The line morph itself uses the transition in this skill.

When to use

Use this when asked to create morphing icons, to animate between two icons, or to review an icon component that interpolates SVG lines. Do not use it for a crossfade between two <svg> trees.

1. Lock the model

Each line is { x1, y1, x2, y2, opacity? }. Each icon is { lines, rotation?, group? } and lines is a tuple of three. The collapsed line is zero length at the center, with opacity: 0.