CSS clip path test

HTML

<div id="d1"></div>
<img id="img1" src="http://dreamatico.com/data_images/cat/cat-5.jpg" alt="" width="150px">

SCSS

#d1 {
    width: 60%;
    height: 350px;
    background: lime;
    -webkit-clip-path: circle(150px, 450px, 50px);
    -moz-clip-path: circle(150px, 450px, 50px);
    -ms-clip-path: circle(150px, 450px, 50px);
    -o-clip-path: circle(150px, 450px, 50px);
    clip-path: path(M 0 0 Q 30 0 50 30 Q 60 70 100 70 L 690 70 Q 730 70 750 30 Q 760 0 800 0);
}

@keyframes animateClip {
    to {
        -webkit-clip-path: ellipse(25% 25% at center right);
    }
}

#img1 {
    -webkit-clip-path: ellipse(50% 50% at 0 50%);
    animation-name: animateClip;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}