啥是佩奇? SVG 线条动画告诉你。

<div class="container">
        <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1600 2844" style="enable-background:new 0 0 1600 2844;" xml:space="preserve">

     <path class="yy"  fill-rule="evenodd" clip-rule="evenodd" fill="none"  d="M1170.7,1628.5c1.1,8,8.6,13,6.1,20.8c-1.8,4.2-3.6,5.1-7.8,6.9c-15.9-4.1-20.4-27.8-27.7-40.7
     c-26.3-2.9-60-31.8-84.9-28.6c0,0.3,0,0.6,0,0.9c24.1,50.6,33.3,107,45,172.3c3.8,21.2,5.3,61.9-8.7,71c-11.6,7.6-37.9,0.9-55.4,0.9
     c-46,0-93-0.7-140.3-0.9c-1.4,13.7,1.5,51,6.9,62.3c13-0.4,20.4-0.4,31.2,1.7c6.6,15.6,6.2,22.7-4.3,34.6
     c-11.5,0.9-23.1,1.7-34.6,2.6c-11.7,1.2-23.8-9.6-21.6-21.6c1.1-5.8,7.1-9.6,8.7-13.9c2.2-6.2-6.6-61.8-8.7-64.1
     c-10-4.7-28.4-0.9-41.6-0.9c-24.4,0-104.2-3.9-120.4,3.5c0.3,23.4,0.6,46.8,0.9,70.1c10.4-0.3,30.5-3.9,36.4,1.7
     c9.6,5.1,9.1,16.7,6.1,27.7c-15,8.7-61.1,17.7-69.3-4.3c-3.6-13.9,5.6-16.6,7.8-25.1c-0.6-23.1-1.2-46.2-1.7-69.3
     c-38.7-4.5-148.7,16.8-168.9-6.9c-12.4-14.6-1.5-48.6-0.9-67.5c-7.5-1.4-15-2.9-22.5-4.3c-4.6,2-9.2,4-13.9,6.1
     c-19.1,5.4-36.4-3.1-45.9-10.4c-0.3-2.9-0.6-5.8-0.9-8.7c0.9-1.7,1.7-3.5,2.6-5.2c13.7-1.8,19.8,8.3,36.4,5.2
     c0.3-0.6,0.6-1.2,0.9-1.7c-8.1-23.5-16.7-29.3,4.3-48.5c31.2-1.1,34.4,20.4,30.3,46.8c0.6,0,1.2,0,1.7,0c3.8,0,7.5,0,11.3,0
     c1.2-30.6,15.9-74.8,26-100.4c2.3-8.7,4.6-17.3,6.9-26c5.5-12.1,14.2-26.5,15.6-41.6c-7.1,0.6-74.6,37.4-77.9,41.6
     c-9.8,12-3.4,47.4-21.6,50.2c-2.6-0.9-5.2-1.7-7.8-2.6c-2.9-10.3,4.4-20.8,0.9-29.4c-3.2,2.3-6.4,4.6-9.5,6.9c-5.2-1.7-7-3-10.4-6.1
     c0.3-2.9,0.6-5.8,0.9-8.7c3.1-4.9,7.8-5.7,9.5-12.1c-14.7-0.5-35.4-0.8-32-17.3c1.7-1.7,3.5-3.5,5.2-5.2c19,2.3,38.1,4.6,57.2,6.9
     c24.3-10,47.3-29.5,71-41.6c10.4-4.9,20.8-9.8,31.2-14.7c4.9-10.7,9.8-21.4,14.7-32c6.3-10.4,12.7-20.8,19.1-31.2
     c-13.3-15.1-32-26.2-43.3-43.3c-25.3-38.1-47.3-102-32-166.3c1.4-9.2,2.9-18.5,4.3-27.7c7.2-15.8,13.5-43.8,23.4-57.2
     c10.4-14,31.3-38.2,37.2-53.7c-38.9-23-91-107.2-22.5-138.6c33.4-15.3,77.6,21.5,91.8,36.4c5.1,5.4,13,23.8,20.8,22.5
     c5.2-1.4,11.1-5.5,13.9-9.5c-21.1-32.6-53.3-102-5.2-132.5c38.2-24.2,83.5,14.5,93.5,39.8c3.5,15.3,6.9,30.6,10.4,45.9
     c0.6,0.3,1.2,0.6,1.7,0.9c13.9-4,27.7-8.1,41.6-12.1c21.1-3.5,42.1-6.9,63.2-10.4c22.9-4.9,60.8,7.1,71.9,5.2
     c17.3-5.8,28-21.5,55.4-19.9c58.4,3.3,134.2,90.3,102.2,158.5c-17.8,37.8-94.4,97.4-133.4,116c1.1,9.3,6.1,12,9.5,18.2
     c7.3,13,11.3,29.9,14.7,45.9c13.1,61-11.7,116.9-37.2,148.9c-7.5,7.8-15,15.6-22.5,23.4c12.8,21.6,31.5,41.2,45,63.2
     c4.6,9.2,9.2,18.5,13.9,27.7c9.3,6.8,22.5,4.7,32.9,10.4c18.4,10.1,46.1,22.5,66.7,27.7c9,2.3,42-9.4,58.9-9.5
     c0.9,1.4,1.7,2.9,2.6,4.3c2.6,4.8,0.8,9-1.7,13c-5.5,1.4-11,2.9-16.5,4.3c0.3,1.4,0.6,2.9,0.9,4.3c5.9,1.3,7.5,3.1,11.3,6.1
     c0.3,1.7,0.6,3.5,0.9,5.2C1194.2,1640.6,1183.7,1630.4,1170.7,1628.5z"/>
</svg>
    </div>

.container {
    width: 400px;
    margin: 20px auto;
}

.yy {
    stroke-width: 5;
    stroke: #f987ae;
    animation: lineMove 13s ease-out infinite;
}

@keyframes lineMove {
    0% {
        stroke-dasharray: 0, 4891;
    }
    50% {
        stroke-dasharray: 4891, 4891;
        fill: rgba(0, 0, 0, 0);
        opacity: 1;
    }
    100% {
        stroke-dasharray: 4891, 4891;
        fill: rgba(249, 135, 174, 1);
        opacity: 0;
    }
}

var obj = document.querySelector("path");
var length = obj.getTotalLength();

console.log(length);
// 4890.61669921875