JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <path>
        <animate
            id="a"
            attributeName="d"
            attributeType="XML"
            from="m 0 1 l 1 0 l 0 0 l -1 0"
            to=  "m 0 0 l 1 0.5 l 0 1 l -1 0"
            dur="500ms"
            fill="freeze"
            _begin="d.end"
        />
        <animate
            id="b"
            attributeName="d"
            attributeType="XML"
            from="m 0 0 l 1 0.5 l 0 1 l -1 0"
            to=  "m 0 0 l 1 0 l 0 1 l -1 0"
            dur="500ms"
            fill="freeze"
            begin="a.end"
        />
        <animate
            id="c"
            attributeName="d"
            attributeType="XML"
            from="m 0 0 l 1 0 l 0 1 l -1 0"
            to=  "m 0 0 l 1 0 l 0 1 l -1 -1"
            dur="500ms"
            fill="freeze"
            begin="b.end"
        />
        <animate
            id="d"
            attributeName="d"
            attributeType="XML"
            from="m 0 0 l 1 0 l 0 1 l -1 -1"
            to=  "m 0 0 l 1 0 l 0 0 l -1 0"
            dur="500ms"
            fill="freeze"
            begin="c.end"
        />
    </path>
</svg>

CSS

html, body {
    margin: 0;
}