How to animate clipping paths defined in SVG elements? - html

Question

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
<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
#keyframes shape {
0% { clip-path: url(#shape--start) }
100% { clip-path: url(#shape--end) }
}
To clarify more, if I use something like
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!

Answer 1

You need to animate the SVG itself using animate
.box {
width:300px;
height:200px;
background:red;
clip-path: url(#shape--start);
}
<svg width=0 height=0>
<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">
<animate attributeType="XML" attributeName="points"
from="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778"
to="144.444,-44.444 166.667,-11.111 152.778,2.778 130.556,-30.556 97.222,-52.778 111.111,-66.667"
dur="2s" repeatCount="indefinite"/>
</polygon>
</clipPath>
</defs>
</svg>
<div class="box">
</div>

Answer 2

Animation option using animateTransform
.box {
width:300px;
height:200px;
background:red;
clip-path: url(#shape--start);
}
<svg width="0" height="0">
<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">
<animateTransform attributeType="XML" attributeName="transform" type="translate"
values="0,100;144.444,-44.444"
dur="2s" repeatCount="indefinite"/>
</polygon>
</clipPath>
</defs>
</svg>
<div class="box">
</div>
Roundtrip animation
.box {
width:300px;
height:200px;
background:red;
clip-path: url(#shape--start);
}
<svg width="0" height="0">
<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">
<animateTransform attributeType="XML" attributeName="transform" type="translate"
values="0,100;144.444,-44.444;0,100"
dur="2s" repeatCount="indefinite"/>
</polygon>
</clipPath>
</defs>
</svg>
<div class="box">
</div>