.clip {
    width: 100%;
    min-height: 150px;
    margin: 20px 0;
    border-bottom: 1px solid #ccc;
}

.clip .item {
    display: inline-block;
    width: 150px;
    height: 150px;
    background: #ccc;
}

.clip-ellipse .item1 {
    clip-path: ellipse();
}

.clip-ellipse .item2 {
    clip-path: ellipse(75px 25px);
}

.clip-ellipse .item3 {
    clip-path: ellipse(25px 75px at 50% 0);
}

.clip-ellipse .item4 {
    clip-path: ellipse(75px 25px);
    animation: ellipseAnim 4s linear infinite;
}

@keyframes ellipseAnim {
    0% {
        clip-path: ellipse(75px 25px); 
    }

    25% {
        clip-path: ellipse(50px 50px);
    }

    50% {
        clip-path: ellipse(25px 75px);
    }

    75% {
        clip-path: ellipse(50px 50px);
    }

    100% {
        clip-path: ellipse(75px 25px);
    }
}