Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<title>CSS Masking: Test clip-path property and shape function with single-value arc radius</title>
</head>
<style>
@keyframes animate-shape {
from {
clip-path: shape(from 40px 100px, arc to 200px 100px of 50% 50% small cw, arc to 0 100px of 30% 30% small cw);
}
to {
clip-path: shape(from 40px 100px, arc to 200px 100px of 30% 30% small cw, arc to 0 100px of calc(10px + 45%) calc(10px + 45%) small cw);
}
}
#shape {
width: calc(500px / sqrt(2));
height: calc(500px / sqrt(2));
background: green;
animation: animate-shape 100s;
animation-play-state: paused;
animation-timing-function: steps(2, start);
}
</style>
<div id="shape"></div>
</html>