<hgroup class="line-animation2">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px">
        <line x1="0" y1="0" x2="200" y2="200" class="la-line"></line>
        <line x1="200" y1="0" x2="0" y2="200" class="la-line"></line>
        <line x1="100" y1="10" x2="100" y2="190" class="la-line2"></line>
        <line x1="10" y1="100" x2="190" y2="100" class="la-line2"></line>
        <rect x="10" y="10" width="180" height="180" rx="20" ry="20" class="la-rect"></rect>
        <circle cx="100" cy="100" r="80" class="la-circle"></circle>
        <rect x="50" y="50" width="100" height="100" rx="20" ry="20" class="la-rect2"></rect>
        <circle cx="100" cy="100" r="40" class="la-circle2"></circle>
    </svg>
</hgroup>
.line-animation2 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.la-line {
    stroke-width: 1px;
    stroke: #000;
    stroke-dasharray: 282;
    stroke-dashoffset: 282;
    animation: dash 0.5s ease-in forwards;
}

.la-line2 {
    stroke-width: 1px;
    stroke: #000;
    stroke-dasharray: 282;
    stroke-dashoffset: 282;
    animation: dash 0.5s ease-out 0.5s forwards;
}

.la-rect {
    fill: none;
    stroke: #000;
    stroke-dasharray: 720;
    stroke-dashoffset: 720;
    animation: dash 0.5s linear 1s forwards;
}

.la-circle {
    fill: none;
    stroke: #000;
    stroke-dasharray: 720;
    stroke-dashoffset: 720;
    animation: dash 0.5s ease-in 1s forwards;
}

.la-rect2 {
    fill: none;
    stroke: #000;
    stroke-dasharray: 720;
    stroke-dashoffset: -720;
    animation: dash 1s ease-out 1s forwards;
}

.la-circle2 {
    fill: none;
    stroke: #000;
    stroke-dasharray: 720;
    stroke-dashoffset: -720;
    animation: dash 1s linear 1s forwards;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.