body {
    background-color: #212121;
}

.card {
    background-color: #343131;
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin: 20px;
    position: relative;
}

.pulse {
    height: 100px;
    width: 200px;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.pulse:after {
    content: "";
    display: block;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200px 100px"><polyline fill="none" stroke-width="3px" stroke="white" points="2.4,58.7 70.8,58.7 76.1,46.2 81.1,58.7 89.9,58.7 93.8,66.5 102.8,22.7 110.6,78.7 115.3,58.7 126.4,58.7 134.4,54.7 142.4,58.7 197.8,58.7 "/></svg>') 0 0 no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    animation: 5s pulse infinite linear;
}

.pulse:before {
    content: "";
    background: #343131;
    position: absolute;
    z-index: -1;
    left: 2px;
    right: 2px;
    bottom: 0;
    top: 16px;
    margin: auto;
    height: 3px;
}

@keyframes pulse {
    0% {
        clip: rect(0, 0, 100px, 0);
    }

    10% {
        clip: rect(0, 66.6666666667px, 100px, 0);
    }

    38% {
        clip: rect(0, 133.3333333333px, 100px, 0);
    }

    48% {
        clip: rect(0, 200px, 100px, 0);
    }

    52% {
        clip: rect(0, 200px, 100px, 0);
    }

    62% {
        clip: rect(0, 200px, 100px, 66.6666666667px);
    }

    90% {
        clip: rect(0, 200px, 100px, 133.3333333333px);
    }

    100% {
        clip: rect(0, 200px, 100px, 200px);
    }
}

/*# sourceMappingURL=pulse.css.map */