.wrapper{
    width: 50px;
    height: 50px;
}
.btn_block {
    /*display: flex;
    justify-content: right;*/
}

.player-btn {
   /* position: relative;*/
}
.player-btn > * {
    pointer-events: none;
}
.player-btn-particles {
    width: 50px;
    height: 50px;
    background: #0037a3;
    filter: url(#fancy-goo);
}
.player-btn-particle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #0037a3;
}
.player-btn-particle--second {
    right: 0;
}
.player-btn-particle--third {
    right: 0;
    bottom: 0;
}
.player-btn-particle--fourth {
    bottom: 0;
}
.player-btn-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
}
.player-btn .svg-play {
    stroke: #fff;
    stroke-width: 20;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    /*stroke-linejoin: round;
    stroke-linecap: round;*/
}
.player-btn .svg-play.to-pause {
    animation: to-pause 1s ease-in-out forwards;
}
.player-btn .svg-play.to-play {
    animation: to-play 1s ease-in-out forwards;
}
.player-btn.active .player-btn-particles {
    animation: 3s rotation linear infinite;
}
.player-btn.active .player-btn-particle {
    will-change: transform;
    border-radius: 50%;
}
.player-btn.active .player-btn-particle--one {
    animation: particle-1 2s ease-in-out infinite;
}
.player-btn.active .player-btn-particle--second {
    animation: particle-2 2s 1s ease-in-out infinite;
}
.player-btn.active .player-btn-particle--third {
    animation: particle-3 2s 1.5s ease-in-out infinite;
}
.player-btn.active .player-btn-particle--fourth {
    animation: particle-4 2s 2s ease-in-out infinite;
}

.svg-hidden {
    position: absolute;
    height: 0;
    width: 0;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    50% {
        background: #00aaff;
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes particle-1 {
    50% {
        transform: translate(-6px, 15px);
        background: #00aaff;
    }
}
@keyframes particle-2 {
    50% {
        transform: translate(-12px, -9px);
        background: #00aaff;
    }
}
@keyframes particle-3 {
    50% {
        transform: translate(10px, -25px);
        background: #00aaff;
    }
}
@keyframes particle-4 {
    50% {
        transform: translate(0px, 10px);
        background: #00aaff;
    }
}
@keyframes to-play {
    0% {
        stroke-width: 120;
        d: path("M10,10 H90 V90 H10 Z");
    }
    50% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-width: 20;
       d: path("M90 50 L30 15 L30 160 L170 100 L130 75");
        stroke-dashoffset: 0;
    }
}
@keyframes to-pause {
    0% {
        stroke-dashoffset: 0;
       /* d: path("M90 50 L30 15 L30 160 L170 100 L130 75");*/
        stroke-width: 20;
        d: path("M90 50 L30 15 L30 160 L170 100 L130 75");
    }
    50% {
        stroke-dashoffset: 1000;
    }
    100% {
        /*d: path("M50 20 V160 M140 20 V160");*/
        stroke-width: 120;
        d: path("M10,10 H90 V90 H10 Z");

        stroke-dashoffset: 0;
    }
}