body {
    background: #313131
}

svg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

svg rect {
    fill: none;
    stroke: #faf27e;
    stroke-width: 8px;
    stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
    animation: 4s outline 1 forwards;
}

svg line {
    stroke: #faf27e;
    stroke-dasharray: 400px;
    stroke-dashoffset: 400px;
    animation: 2s diagonal-line 1 forwards;
}

svg path {
    fill: #faf27e;
    opacity: 0;
    animation: 2s fade 1 forwards;
    animation-delay: 1.2s;
}

@keyframes outline {
    from {
        stroke-dashoffset: 2000px;
    }
    to {
        stroke-dashoffset: 0px;
    }
}

@keyframes diagonal-line {
    from {
        stroke-dashoffset: 400px;
    }
    to {
        stroke-dashoffset: -300px;
    }
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}