div.main
            div.bow
                div.bow__base
                div.bow__top
                div.bow__bottom
                    
                div.rope
                    div.rope__top
                    div.rope__bottom

            div.arrow
                div.arrow__line
                div.arrow__head
                div.arrow__top
                div.arrow__bottom
                    
            div.line.line-1
            div.line.line-2
                    
            div.wall

/* variables */
$bg: #FCE8CE;
$green: #00BDAE;
$orange: #FF6353;
$blue: #2C6087;
$red: #F82B48;
$black: #555468;


/* Reset */
*, *::after, *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* Generic */
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $bg;

}
/**/
.main{
    width: 800px;
    height: 600px;
    position: absolute;
    overflow: hidden;
  
  	@media(max-width: 800px){ transform: scale(.75); }
  	@media(max-width: 600px){ transform: scale(.5); }

}
/**/
.bow{
    position: absolute;
    top: 120px;
    left: 345px;
    width: 120px;
    height: 350px;
    animation: bow 8s infinite;

    &__base{
        position: absolute;
        top: calc(50% - 260px);
        right: 0%;
        width: 1500px;
        height: 520px;
        z-index: 100;

        border-radius: 70% 30% 30% 70% / 50% 50% 50% 50%;
        border-top: 15px solid transparent ;
        border-right: 15px solid $green;
        border-bottom: 15px solid transparent;
        border-left: 15px solid transparent;

        &::before{
            content: '';
            position: absolute;
            top: calc(50% -  37.5px);
            right: -15px;
            width: 25px;
            height: 75px;

            background-image:
                linear-gradient(
                    to bottom,
                    $blue 30%,
                    $red 30%,
                    $red 70%,
                    $green 70%
                );
        }
    }
    &__top,
    &__bottom{
        position: absolute;
        left: 10px;
        height: 25px;
        width: 12px;
        border-radius: 10px;
        background: $green;
        z-index: 100;
    }
    &__bottom{ bottom: 0px; }
}
.rope{
    position: absolute;
    top: 5px;
    left: 12px;
    height: 340px;

    &__top,
    &__bottom{
        position: absolute;
        height: 175px;
        width: 7px;
        border-radius: 10px;
        background: $black;
        animation: row-top 4s infinite linear , row-h 4s infinite linear;
    }
    &__bottom{
        bottom: 0%;
        animation: row-bottom 4s infinite linear , row-h 4s infinite linear;
    }
}
.arrow{
    position: absolute;
    top: calc(50% - 22.5px);
    left: calc(50% - 75px);
    width: 300px;
    height: 45px;
    animation: arrow 8s infinite linear, arrow-s 8s infinite linear;


    &__line{
        position: absolute;
        width: 280px;
        height: 5px;
        top: calc(50% - 2.5px);
        left: calc(50% - 140px);
        z-index: 50;

        background: $black;
        border-radius: 5px;
    }
    &__head{
        position: absolute;
        top: 8px;
        right: 5px;
        width: 30px;
        height: 30px;
        z-index: 50;

        background-image: linear-gradient(-45deg, $orange 0% , $orange 50% , transparent 50%);
        transform: rotateZ(-45deg);
    }
    &__top,
    &__bottom{
        position: absolute;
        left: 5px;
        width: 50px;
        height: 22px;

        background-image: linear-gradient(to right, $orange 0% , $orange 70% , $red 70%);
        transform: skewX(30deg);
    }
    &__bottom{
        bottom: 0;
        background-image: linear-gradient(to right, $green 0% , $green 70% , $blue 70%);
        transform: skewX(-30deg);
    }
}
.line{
    position: absolute;
    left: 100%;
    top: 40%;
    width: 50px;
    height: 5px;
    background: $black;
    animation: line 8s infinite linear;
    &-2{
        top: 60%;
        animation-delay: .2s;
    }
}
.wall{
    position: absolute;
    width: 5px;
    height: 200px;
    top: calc(50% - 100px);
    right: -5px;
    z-index: 50;
    background: $black;
    animation: wall 8s infinite linear;
}

/**/

@keyframes wall {
    0%, 80%, 96%{ right: -10px; }
    82%, 95%{ right: 0px; }
}
@keyframes bow {
    0%, 22%, 100%{ top: 120px; left: 345px; }
    30%{ top: 120px; left: -50vw; }
    80%{ top: 150vmax; left: 345px; }
}
@keyframes arrow {
    0%, 100%{
        left: calc(50% - 75px);
        transform: rotateZ(0deg);

    }
    21%{ left: calc(50% - 170px); }
    24%, 79%{
        left: calc(100% - 350px);
        transform-origin: right;
        transform: rotateZ(0deg);
    }
    80%, 82%, 84%{
        transform-origin: right;
        transform: rotateZ(-5deg);
        left: calc(100% - 305px);
    }
    81%, 83%, 85%{
        transform-origin: right;
        transform: rotateZ(5deg);
        left: calc(100% - 305px);
    }
    86%, 95%{
        transform-origin: right;
        transform: rotateZ(0deg);
        left: calc(100% - 305px);
    }
}
@keyframes arrow-s {
    0%, 40%, 42%, 44%, 46%, 48%, 60%, 62%, 64%, 66%, 68%, 70%{ top: calc(50% - 22.5px);}
    41%, 43%, 45%, 47%, 49%, 61%, 63%, 65%, 67%, 69% { top: calc(50% - 18px); }
}
@keyframes row-h {
    0%, 12.5%, 44%, 50%{ height: 175px; }
    42.5%{ height: 198px; }
}
@keyframes row-top {
    0%, 50%{
        transform-origin: top;
        transform: rotateZ(0deg);
    }
    40%, 42.5%{
        transform-origin: top;
        transform: rotateZ(30deg);
    }
    47.5%{
        transform-origin: top;
        transform: rotateZ(-15deg);
    }
}
@keyframes row-bottom {
    0%, 50%{
        transform-origin: bottom;
        transform: rotateZ(0deg);
    }
    40%, 42.5%{
        transform-origin: bottom;
        transform: rotateZ(-30deg);
    }
    47.5%{
        transform-origin: bottom;
        transform: rotateZ(15deg);
    }
}
@keyframes line{
    0%, 25%, 30.1%, 35.1%, 40.1%, 45.1%, 50.1%, 55.1%, 60.1%, 65.1%, 70.1%, 75.1%{ left: 100%; }
    30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%{ left: -100px; }
}

/*
Designed by: Dennis Hoogstad
Original image: https://dribbble.com/shots/1937726-Bow-And-Arrow
*/