SVG Morphing

<div class="svg-morph">
    <svg viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="30" />
    </svg>
</div>

.svg-morph {
    width: 100px;
    height: 100px;
}

.svg-morph svg {
    width: 100%;
    height: 100%;
}

.svg-morph circle {
    fill: url(#gradient);
    animation: morphCircle 3s ease-in-out infinite;
}

@keyframes morphCircle {
    0%, 100% {
        r: 30;
        fill: #667eea;
    }
    50% {
        r: 40;
        fill: #764ba2;
    }
}

/* Alternative with transform */
.svg-morph svg {
    animation: svgRotate 4s linear infinite;
}

@keyframes svgRotate {
    from {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.2);
    }
    to {
        transform: rotate(360deg) scale(1);
    }
}