<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" cx="256" cy="256" r="256"
        transform="rotate(-90, 256,256)"/>
    <path class="path" d="M256,0L256,512"></path>
    <path class="path" d="M0,256L512,256"></path>
    <path class="path" d="M 75 75 C 156 146, 356 146, 437 75"/>
    <path class="path" d="M 75 75 C 156 146, 356 146, 437 75" transform="rotate(180, 256,256)"/>


    <path class="path" d="M 256 0 C 96 176, 156 396, 256 512"/>
    <path class="path" 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;
        animation: dash 2s linear;
        animation-fill-mode: forwards;
    }

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

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