Morphing Icons with Claude
A tutorial by Benji Taylor. Featured in the OTF curated resource library.
What Are Morphing Icons?
Morphing icons smoothly animate between two icon states. The classic example: a hamburger menu icon (three horizontal lines) that transforms into an X (close) icon when the menu opens. Instead of swapping icons instantly, the lines rotate and reposition in a fluid animation.
These micro-interactions add significant polish to interfaces. They communicate state changes clearly, delight users with smooth motion, and make interactions feel more tangible.
Building morphing icons manually requires deep SVG path knowledge — matching path point counts, calculating intermediate positions, and coordinating timing. Claude makes this dramatically easier by generating the SVG paths, transition logic, and React components from natural language descriptions.
The SVG Morphing Technique
SVG morphing works by interpolating between two SVG path data strings. For smooth animation, both paths must have the same number of control points. The browser (or animation library) calculates intermediate positions for each point, creating a smooth transition.
CSS transitions work for simple transforms: rotating lines, scaling circles, translating positions. These are the easiest to implement and perform best.
Framer Motion handles more complex morphs with its animate prop. It interpolates SVG d attributes automatically when path point counts match.
GSAP MorphSVG is the most powerful option for complex morphs where paths have different point counts. It automatically adds interpolation points to create smooth transitions between any two shapes.
For most UI icons, CSS transitions are sufficient and performant.
Building Morphing Icons with Claude
Create a morphing icon component step by step.
Describe the two states
Tell Claude the starting and ending icon states: 'Create a morphing icon that transitions from a hamburger menu (3 horizontal lines) to a close X when clicked. Use smooth CSS transitions.'
Generate the component
Claude creates a React component with SVG paths for both states, CSS transitions for the morph, and a toggle state handler. The component accepts `isOpen` as a prop for controlled usage.
Customize the animation
Refine the timing and easing: 'Make the transition 300ms with an ease-in-out curve. The middle line should fade out while the top and bottom lines rotate into the X shape.'
Add to your interface
Drop the component into your navbar or wherever the icon is needed. The morphing animation triggers automatically when the state changes.
Common Morphing Patterns
Hamburger → Close (X)
The classic. Three lines become an X. Middle line fades, top and bottom rotate 45° in opposite directions. CSS transforms handle this perfectly.
Play → Pause
Triangle morphs into two vertical bars. This requires SVG path interpolation since the shapes are fundamentally different. Framer Motion handles it well.
Plus → Minus
Simple but effective. The vertical bar of the plus shrinks to zero height, leaving just the horizontal bar. Pure CSS height/scale transition.
Arrow → Check
A right-pointing arrow morphs into a checkmark on completion. The arrow's shaft becomes the long leg of the check, and the arrowhead rotates to form the short leg.
