Blogpost Anata - Handwriting animation with SVG - 5

gistfile1.html

<svg id="anata" x="0px" y="0px" viewBox="-362.9 1435.6 580.6 391.4" xml:space="preserve">
    <defs>
        <clipPath id="clip-a-1">
            <path d="M-205,1734c-3,11.8-6.4,23.4-9.8,35.1c-1,3.3-2,6.6-4.2,9.2s-6,4.1-9.1,2.8c-2.3-1-3.7-3.4-4.2-5.8s-0.2-5,0.2-7.4c2.3-15.6,7.3-30.6,11.3-45.8c0.2-0.9,0.3-1.9,0.3-1.9c-4.9-5.4-10.7-11.9-15.7-17.3c-1.2-1.3-2.4-2.6-3.6-3.9c-1-1.1-3.8-4-5.5-5.7c0,0-3.2,4.4-4.5,6c-7,8.6-15.5,16.1-25.2,21.5c-10.3,5.8-21.8,9.1-33.6,9.1c-5.6,0-11.3-0.7-16.7-2.3c-13.6-4-25.8-13.5-31.9-26.4c-4.4-8.8-5.8-18.6-5.7-28.3c0-9.7,1.5-19.6,5.6-28.4c5.2-11.3,14.6-20.3,25.4-26.5c6.7-3.8,14.6-5.6,22.2-6.9c11.5-1.8,22.4-0.8,33.7,3.9c5.8,2.4,11.1,5.9,16,9.9c2.5,2,5,4.1,7.3,6.3c3.7,3.5,5.7,5.7,6.1,6c0.6-1.4,1-2.2,1.7-3.6c4.8-11.1,10-22.1,14.5-33.4c8.1-20.4,16.2-40.8,23.7-61.4c5.8-15.9,11.1-32,16-48.2c3.6-12,6.7-24.2,8.7-36.5c1-5.8,5.2-7,8.6-8.3c12.3-5,24.7-9.9,38.3-10.2c2,0,4.5,0.2,6,1.3c1.2,0.9,2,3.4,1.7,5c-1.6,7.7-3.5,15.3-5.5,22.8c-3.2,11.8-6.8,23.5-10.1,35.3c-4.1,14.7-8.1,29.4-12,44.1c-3.4,13-6.5,26.2-9.8,39.2c-3.6,14.3-7.3,28.5-11.2,42.7c-3.7,13.4-7.8,26.6-11.6,40c-2.7,9.5-5.1,19.1-7.5,28.8c-0.2,0.9-0.5,2.1-0.5,2.1c4.4,4.7,8.1,8.1,11.1,11c4.4,4.2,9.3,8.8,14,12.7c8.4,7.1,17.2,13.7,26.4,19.9c18.3,12.3,37.9,22.6,58.4,30.8c40.9,16.4,85.2,24.4,129.3,22.9c12.6-0.4,25.1-1.7,37.5-3.7c19-3.1,37.9-8.1,55.6-15.8c11.2-4.9,21.9-11.1,32-18.1c3.3-2.3,7-5,10.3-9.9c2.8-4.2,0.6-8.4-1.8-10.5c-3.2-2.8-4.8-3.2-7.2-4.1c0,0,7.3,0.6,9,0.9c3.3,0.5,6.6,1.3,9.9,2.2c6.5,1.8,12.8,4.4,18.8,7.6c3.5,1.9,7,4.2,8.8,7.8c1.7,3.5,1.5,7.7,0,11.3s-4,6.7-6.8,9.4c-7,6.8-15.5,11.8-24.1,16.4c-20.3,10.7-41.6,19-63.7,25.5c-10.8,3.2-21.8,5.8-32.9,7.9c-29.9,5.6-60.5,7.3-90.8,4.6c-45.5-4-90.1-17.6-130.3-39.4C-159.1,1771.7-181.6,1753-205,1734z M-193.3,1584.9c-0.6,1.4-1.1,2.4-1.6,3.7c-4.6,10.7-9,21.5-13.9,32.1c-3.5,7.4-7.1,14.8-10.7,22.2c-1.8,3.7-3.6,7.4-5.4,11.1c-1.1,2.4-3,5.9-3,5.9c0.9,1,4.3,5.2,6.5,7.7c3.7,4.2,7.1,7.8,10.6,12.2c0,0,0.7-3.5,0.9-4.6c1.5-8.4,2.7-15.5,4.3-23.9c1.7-9.1,3.4-18.3,5.2-27.4c2.5-13,5-26,7.4-39c0.1-0.3,0.1-0.6,0.1-0.9C-192.9,1584.2-193,1584.3-193.3,1584.9z M-302.7,1647.9c-1,0-2,0.1-3,0.2c-6.2,0.7-12.1,3.4-16.9,7.3c-5,4.1-8.9,9.7-10.8,16c-2,7-1.3,14.9,2.2,21.3c3.5,6.4,9.8,11.4,17,12.9c8.3,1.8,17.1-0.9,24.2-5.6c6.4-4.2,13.5-10.2,18.6-15.9c2.6-2.8,5.9-7.4,8.3-11.5c0,0-2.1-2.5-4.1-5.1c-2.9-3.6-7.3-7.6-10.1-9.9C-284.5,1652-293.5,1647.8-302.7,1647.9z"/>
        </clipPath>
        ...
    </defs>
    <g clip-path="url(#clip-a-1)" stroke-width="40">
        <path class="anata-path anata-path--a-1" fill="none" stroke="#fff" stroke-miterlimit="10" d="M121.1,485.3 150.3,367.7 175.4,266.7 207.3,138 182,148 148.7,267.3 126.5,313.8 98,376.4 73.3,400.6 50.2,411.3 25.3,411.3 6.7,392.7 -1.3,369.3 6,347.3 26,326.3 50.2,322.7 75.3,332 91.5,345.8 121.1,380 156.1,415.3 195.3,448.7 244,474.7 292,492.7 335.3,502 379.3,505.3 410,505.3 455.3,496 494.2,484 528.8,468.2 554,450 540.7,436.7 498.7,424.7"/>
    </g>
    ...
</svg>