SVG Icon Morphing Animation | QuickCoder

HTML

CSS

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f0f2f5;
            font-family: 'Arial', sans-serif;
        }
        
        .icon-container {
            width: 120px;
            height: 120px;
            position: relative;
            cursor: pointer;
        }
        
        svg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        path {
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: center;
        }
        
        .play path {
            fill: #4CAF50;
        }
        
        .pause path {
            fill: #FFC107;
        }
        
        .stop path {
            fill: #F44336;
        }
        
        /* Initial states */
        .pause, .stop {
            opacity: 0;
            transform: scale(0.8);
        }
        
        /* Active states */
        .active {
            opacity: 1;
            transform: scale(1);
            z-index: 10;
        }
        
        /* Animation for the next state */
        .next {
            opacity: 0;
            transform: scale(1.2);
            z-index: 5;
        }

JavaScript

SVG Icon Morphing Animation Preview

Download Options