morphing-icons_skill

Overview

This skill builds icon components that morph between shapes by transforming three SVG lines rather than crossfading. Every icon is defined as exactly three lines (unused lines collapse to a center point) and optional rotation/group metadata enables smooth rotational variants and grouped animations. The approach produces consistent, predictable transitions suitable for UI controls and animated iconography.

How this skill works

Each icon is an IconDefinition with three IconLine objects (x1,y1,x2,y2,opacity). Icons with fewer visual strokes use collapsed zero-length lines at the shared center so every icon shape can interpolate to any other. Grouped icons share the same base lines and only differ by rotation, which is animated with a spring; ungrouped icons jump rotation instantly. Transitions respect prefers-reduced-motion and use rounded stroke endcaps and a consistent viewBox for pixel-perfect results.

When to use it

• When you need icons that visually transform into one another (not simple crossfades)
• For animated UI affordances like toggle → close, menu → back, or play → pause
• When you want rotational variants that animate naturally (e.g., arrows)
• Where consistent motion and reduced-motion support are required
• When you need a compact system that guarantees any icon can morph into any other

Best practices

• Always define exactly three lines per icon; use the collapsed constant for unused lines
• Keep all icons in the same viewBox (14x14 recommended) and use CENTER = 7 for collapsed coordinates
• Group rotational variants by sharing the same base lines and set a group string plus rotation degrees
• Animate rotation with a spring implementation and jump instantly when icons are not in the same group
• Respect prefers-reduced-motion by disabling transitions when requested; use strokeLinecap="round" and aria-hidden="true" for decorative SVGs

Example use cases

• A toolbar where the menu icon morphs into a close icon on open/close actions
• A play/pause control where the triangle morphs into parallel lines and back
• Toggle buttons that smoothly rotate and morph between on/off states within the same rotation group
• Icon libraries where any icon should transition into any other for micro-interaction demos
• Accessibility-conscious interfaces that switch to instant states when reduced-motion is enabled