# Bringing SVG Icons to Life with Animation Principles

Design interactive icons using Disney's squash and stretch technique.

- **Source:** [Josh Comeau](https://www.joshwcomeau.com)
- **Published:** 2026-04-13
- **Topic:** [Design & UX](https://brifing.si/c/design)
- **Original article:** <https://www.joshwcomeau.com/animation/squash-and-stretch/>
- **On Brifing:** https://brifing.si/s/b20194aa-655b-4d52-acd8-40127f15a34b

## From Disney to Web Animation Techniques

Disney's 12 animation principles from 1981, like squash and stretch, can be adapted to web interfaces. This technique simulates objects compressing and elongating during movement for organic feel. Particularly effective for SVG icons, it enhances micro-interaction quality.

## Bouncing Ball Example

A bouncing ball perfectly illustrates the core principle. The ball flattens like a water balloon on impact and stretches when rebounding. Without these deformations, animations appear mechanical. Web implementations can use CSS transform properties.

## Application in SVG Icons

This technique proves most useful for SVG icons in real projects. For example, arrows that stretch on hover visually reinforce user interaction. Details like arrowhead thinning sell the effect's believability.

## Lucide Icon Pack

The Lucide icon pack is recommended for implementation. As a continuation of Feather icons, it offers minimalist designs and extensive library. SVG format icons can be easily manipulated via path elements.

## Path Animation with CSS

Simple solution uses CSS transitions. Changing path elements' d attribute enables shape-shifting animations. However, this technique lacks Safari support, offering 79% browser compatibility.

## JavaScript Alternative

Libraries like Motion provide wider browser support. They enable smooth SVG path transitions. The trade-off comes with additional JavaScript payload and code complexity.

## Accessibility Considerations

Animations should be controlled via prefers-reduced-motion media query. Disabling animations for motion-sensitive users is crucial for accessibility. This precaution matters even for subtle interactions.

## CSS Path() Function

The path() function overrides SVG path's d attribute. Multiline path definitions in CSS require backslashes. Short paths can be single-line, while longer ones should be split for readability.

## Importance of Micro-interactions

Interface details significantly impact user experience. Animation techniques like Disney principles reduce mechanical feel. Simple effects like squash and stretch make interfaces more lively and responsive.

## Browser Support Strategy

Safari's lack of path animation support poses challenges. CSS solutions can serve as progressive enhancement. Core functionality remains while advanced effects delight supporting browsers.

## Performance Trade-offs

JavaScript libraries offer wider support but impact performance. CSS solutions may suffice for small-scale projects. Large applications often justify library adoption for sustainability.

## Psychological Impact of Animation

Proper animations create user satisfaction. Disney principles align with human perception. On web interfaces, these techniques reward interactions, increasing engagement.

## Sources covering this story

- https://www.joshwcomeau.com/animation/squash-and-stretch/ — 

---

_Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._