<div class='lines-example'>
    <div class='text'>Z-index, or not z-index?</div>
    <svg class='line -bottom' viewBox='0 0 100 100' preserveAspectRatio='none'>
        <path d='M 5 90 c 10 0 20 -80 30 -80 c 10 0 15 80 20 80 c 5 0 10 -80 15 -80 c 10 0 20 80 25 80' stroke-width='5' stroke='#ff214f' fill='none' stroke-linecap='round' stroke-dasharray='400 400' />
    </svg>
    <svg class='line -top' viewBox='0 0 100 100' preserveAspectRatio='none'>
        <defs>
            <mask id='top-line-mask'>
                <rect x='0' y='0' height='100' width='100' fill='#000'/>
                <rect x='35' y='0' height='100' width='20' fill='#fff'/>
                <rect x='65' y='0' height='100' width='30' fill='#fff'/>
            </mask>
        </defs>
        <path d='M 5 90 c 10 0 20 -80 30 -80 c 10 0 15 80 20 80 c 5 0 10 -80 15 -80 c 10 0 20 80 25 80' stroke-width='5' stroke='#ff214f' fill='none' stroke-linecap='round' stroke-dasharray='400 400' mask='url(#top-line-mask)'/>
    </svg>
</div>

@import url('https://fonts.googleapis.com/css2?family=Festive&display=swap');


@keyframes draw-line {
    0% {
        stroke-dashoffset: 400;
        animation-timing-function: ease-in;
    }
    20% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 0;
        animation-timing-function: ease-out;
    }
    75% {
        stroke-dashoffset: -400;
    }
    100% {
        stroke-dashoffset: -400;
    }
}


.lines-example {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    text-align: center;
    
    > .text {
        font-family: 'Festive', cursive;
        font-size: 10vmin;
    }
    
    > .line {
        display: block;
        position: absolute;
        top: -50%;
        left: 50%;
        transform: translateX(-50%);
        height: 200%;
        width: 100%;
        max-width: 150vmin;
        animation: draw-line 5s linear infinite;
    }
    
    > .line.-top {
        z-index: 1;
    }
    
    > .line.-bottom {
        z-index: -1;
    }
}