<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     viewBox="-10 -10 532 532" style="width: 250px; height: 250px;" xml:space="preserve">

    <circle class="path pathCircle" cx="256" cy="256" r="256"
        transform="rotate(-90, 256,256)"/>
    <path class="path pathLine" d="M256,0L256,512"></path>
    <path class="path pathLine" d="M0,256L512,256"></path>
    <path class="path pathLine2" d="M 75 75 C 156 146, 356 146, 437 75"/>
    <path class="path pathLine2" d="M 75 75 C 156 146, 356 146, 437 75"
          transform="rotate(180, 256,256)"/>


    <path class="path pathLine3" d="M 256 0 C 96 176, 156 396, 256 512"/>
    <path class="path pathLine3" d="M 256 0 C 96 176, 156 396, 256 512"
          transform="rotate(180, 256,256)"/>
</svg>

    .path {
        stroke-width: 10;
        stroke: #000000;
        fill:  transparent;
    }

    .pathCircle {
        animation: dashCircle 1s linear;
        animation-fill-mode: forwards;
    }

    @keyframes dashCircle {
        to {
            stroke-dashoffset: 0;
        }
    }

    .pathLine {
        animation: dashLine 0.4s linear;
        animation-delay: 1s;
        animation-fill-mode: forwards;
     }

    @keyframes dashLine {
        to {
            stroke-dashoffset: 0;
        }
    }

    .pathLine2 {
        animation: dashLine2 0.4s linear;
        animation-delay: 1.4s;
        animation-fill-mode: forwards;
     }

    @keyframes dashLine2 {
        to {
            stroke-dashoffset: 0;
        }
    }

    .pathLine3 {
        animation: dashLine3 0.4s linear;
        animation-delay: 1.8s;
        animation-fill-mode: forwards;
     }

    @keyframes dashLine3 {
        to {
            stroke-dashoffset: 0;
        }
    }

Array.from(document.getElementsByClassName("path")).forEach(pathElement => {
        pathElement.setAttribute('style', 'stroke-dasharray:'+pathElement.getTotalLength()+';stroke-dashoffset:'+pathElement.getTotalLength())
    })