I know how to animate a clip-path defined directly in CSS, but I don't understand how to do it when the clip-path is *referenced* from an SVG clipPath element.

I have been experimenting with simple clip-path animations using just CSS, until I realized you can't define a *compound-path* as a clip-path directly there, so I turned to SVG's clipPath which allows defining multiple paths. But then the *animation* doesn't work, that is, there is no smooth transition.

Here is what I'm trying...

**HTML**

```html
<svg>
    <defs>
        <clipPath id="shape--start">
            <polygon points="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778"/>
        </clipPath>
        <clipPath id="shape--end">
            <polygon points="144.444,-44.444 166.667,-11.111 152.778,2.778 130.556,-30.556 97.222,-52.778 111.111,-66.667"/>
        </clipPath>
    </defs>
</svg>

```

**CSS**

```css
@keyframes shape {
    0% { clip-path: url(#shape--start) }
    100% { clip-path: url(#shape--end) }
}

```

---

To clarify more, if I use something like

**CSS**

```css
@keyframes shape {
    0% { clip-path: polygon(-44% 5%, -14% 5%, 15% 95%, -15% 95%) }
    100% { clip-path: polygon(90% 5%, 120% 5%, 149% 95%, 119% 95%) }
}

```

it works as expected, but I would like to use SVG for the more complex compound paths. 

Thanks for your time and any help in advance!