<div class='css-example'>
    <svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 1360 259'>
        <defs>
            <mask id='ecg-linear-mask'>
                <rect x='-200' y='-200' width='1800' height='800' fill='white' />
                <rect x='-200' y='-200' width='1800' height='800' fill='black'>
                    <animateTransform
                        id='ecg-linear-mask-animation'
                        attributeName='transform'
                        attributeType='XML'
                        type='translate'
                        from='0 0'
                        to='1800 0'
                        dur='4s'
                        begin='indefinite'
                    />
                </rect>
            </mask>
        </defs>
        <g transform='translate(123 -68)'>
            <path
                stroke='#ffffff'
                stroke-width='4'
                fill='none'
                mask='url(#ecg-linear-mask)'
                d='m-123 203s21-0.59 31-0.71c7.1-0.08 14-1.2 21 0 3.5 0.6 6.7 2 9.9 3.5 4 1.9 7.4 4.9 11 7.1 2.8 1.5 5.4 3.4 8.5 4.2 3 0.82 6.6 2.3 9.2 0.71 2.8-1.8 2.8-6 3.5-9.2 3.3-15 2.2-30 3.5-45 2.9-32 9.9-96 9.9-96s2.9 28 3.5 42c0.92 22-0.072 44 0 67 0.12 36-1.2 72 0.71 108 0.75 14 4.2 42 4.2 42s4-26 5.7-40c2.2-17 1.4-35 5.7-52 0.92-3.7 2.1-7.5 4.2-11 3.3-4.8 7.6-9.2 13-12 5.3-2.9 12-2.1 18-4.2 3.7-1.4 7.6-3 11-5.7 6.3-5.7 9.8-14 14-21 4.7-8 8.8-16 13-25 1.5-3.3 2.2-7 4.2-9.9 1.8-2.6 3.9-6.5 7.1-6.4 3.3 0.088 5.1 4.4 7.1 7.1 4.4 6.2 6.7 14 9.9 21 3.4 7.3 5.3 15 9.9 22 3 4.4 6.6 8.8 11 11 5.1 2.7 11 2.9 17 3.5 11 1.1 22 1.6 33 0 6.6-0.95 14-1.2 21-1.4 4.3-0.15 20 0 20 0s21-0.59 31-0.71c7.1-0.08 14-1.2 21 0 3.5 0.6 6.7 2 9.9 3.5 4 1.9 7.4 4.9 11 7.1 2.8 1.5 5.4 3.4 8.5 4.2 3 0.82 6.6 2.3 9.2 0.71 2.8-1.8 2.8-6 3.5-9.2 3.3-15 2.2-30 3.5-45 2.9-32 9.9-96 9.9-96s2.9 28 3.5 42c0.92 22-0.072 44 0 67 0.12 36-1.2 72 0.71 108 0.75 14 4.2 42 4.2 42s4-26 5.7-40c2.2-17 1.4-35 5.7-52 0.92-3.7 2.1-7.5 4.2-11 3.3-4.8 7.6-9.2 13-12 5.3-2.9 12-2.1 18-4.2 3.7-1.4 7.6-3 11-5.7 6.3-5.7 9.8-14 14-21 4.7-8 8.8-16 13-25 1.5-3.3 2.2-7 4.2-9.9 1.8-2.6 3.9-6.5 7.1-6.4 3.3 0.088 5.1 4.4 7.1 7.1 4.4 6.2 6.7 14 9.9 21 3.4 7.3 5.3 15 9.9 22 3 4.4 6.6 8.8 11 11 5.1 2.7 11 2.9 17 3.5 11 1.1 22 1.6 33 0 6.6-0.95 14-1.2 21-1.4 4.3-0.15 20 0 20 0s21-0.59 31-0.71c7.1-0.08 14-1.2 21 0 3.5 0.6 6.7 2 9.9 3.5 4 1.9 7.4 4.9 11 7.1 2.8 1.5 5.4 3.4 8.5 4.2 3 0.82 6.6 2.3 9.2 0.71 2.8-1.8 2.8-6 3.5-9.2 3.3-15 2.2-30 3.5-45 2.9-32 9.9-96 9.9-96s2.9 28 3.5 42c0.92 22-0.072 44 0 67 0.12 36-1.2 72 0.71 108 0.75 14 4.2 42 4.2 42s4-26 5.7-40c2.2-17 1.4-35 5.7-52 0.92-3.7 2.1-7.5 4.2-11 3.3-4.8 7.6-9.2 13-12 5.3-2.9 12-2.1 18-4.2 3.7-1.4 7.6-3 11-5.7 6.3-5.7 9.8-14 14-21 4.7-8 8.8-16 13-25 1.5-3.3 2.2-7 4.2-9.9 1.8-2.6 3.9-6.5 7.1-6.4 3.3 0.088 5.1 4.4 7.1 7.1 4.4 6.2 6.7 14 9.9 21 3.4 7.3 5.3 15 9.9 22 3 4.4 6.6 8.8 11 11 5.1 2.7 11 2.9 17 3.5 11 1.1 22 1.6 33 0 6.6-0.95 14-1.2 21-1.4 4.3-0.15 20 0 20 0s21-0.59 31-0.71c7.1-0.08 14-1.2 21 0 3.5 0.6 6.7 2 9.9 3.5 4 1.9 7.4 4.9 11 7.1 2.8 1.5 5.4 3.4 8.5 4.2 3 0.82 6.6 2.3 9.2 0.71 2.8-1.8 2.8-6 3.5-9.2 3.3-15 2.2-30 3.5-45 2.9-32 9.9-96 9.9-96s2.9 28 3.5 42c0.92 22-0.072 44 0 67 0.12 36-1.2 72 0.71 108 0.75 14 4.2 42 4.2 42s4-26 5.7-40c2.2-17 1.4-35 5.7-52 0.92-3.7 2.1-7.5 4.2-11 3.3-4.8 7.6-9.2 13-12 5.3-2.9 12-2.1 18-4.2 3.7-1.4 7.6-3 11-5.7 6.3-5.7 9.8-14 14-21 4.7-8 8.8-16 13-25 1.5-3.3 2.2-7 4.2-9.9 1.8-2.6 3.9-6.5 7.1-6.4 3.3 0.088 5.1 4.4 7.1 7.1 4.4 6.2 6.7 14 9.9 21 3.4 7.3 5.3 15 9.9 22 3 4.4 6.6 8.8 11 11 5.1 2.7 11 2.9 17 3.5 11 1.1 22 1.6 33 0 6.6-0.95 14-1.2 21-1.4 4.3-0.15 20 0 20 0'
            />
        </g>
    </svg>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    background: linear-gradient(to right, #e63946 0%, #f65966 50%, #e63946 100%);
    overflow: hidden;
}

.css-example {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.css-example > svg {
    width: 100vw;
}

function main() {
    const animation = document.querySelector('#ecg-linear-mask-animation');

    animation.beginElement();

    setInterval(() => {
        animation.beginElement();
    }, 4000);
}

document.addEventListener('DOMContentLoaded', main);