Animate SVG <path> with CSS

loading views

It's fairly easy to create cool animations with SVG paths. I looked into this again for Futureland Sleep. All that is needed is a simple CSS animation.

Futureland Demo

Code

// main.css
path {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: dash 1s ease alternate 1;
}

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

<svg class="demo" width="200" height="200" viewBox="0 0 200 200">
    <path d="M0 0 L0 200 L200 200 L200 0 L0 0" stroke="pink" pathLength="1">
</svg>

Demo