Clip-path-animation/style.css
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    display: grid;
    place-content: center;
    align-items: center;
    font-family: "nunito", sans-serif;
    background-color: #090221;
}

.card {
    position: relative;
    padding: 42px 32px;
    clip-path: circle(7% at 98% 6%);
    transition: all ease-in-out 0.3s;
    background-color: #ffffff;
}

.card__infoicon {
    position: absolute;
    top: 20px;
    right: 42px;
    font-size: 1.4em;
    color: #000000;
    transition: ease-out 0.3s;
}

.card__title {
    margin: 0;
    font-size: 3em;
    line-height: 1.8;
}

.card__description {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.6;
}

.card__credits {
    margin: 0;
    padding: 4px 0;
    font-size: 1.1em;
}

.card:hover,
.card:focus {
    clip-path: circle(75%);
    border-radius: 20px;
    box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.12), 0px 3px 18px rgba(0, 0, 0, 0.08);
    background: #ffffff;
    outline: none;
}

.card:hover .card__infoicon,
.card:focus .card__infoicon {
    opacity: 0;
}

.card:focus {
    box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.12), 0px 3px 18px rgba(0, 0, 0, 0.08),
        0px 0px 0px 4px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width:750px) {
    body{
        background-color: blue;
    }
    .card {
        position: relative;
        padding: 42px 32px;
        clip-path: circle(14% at 96% 3%);
        transition: all ease-in-out 0.3s;
        background-color: #ffffff;
    }
}