A Pen by Anonasaurus Rex.

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by Anonasaurus Rex on CodePen.

License.

index.html

    <div class="character--animated">
        <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="744.09448819" height="1052.3622047" id="svg2" version="1.1" inkscape:version="0.48.4 r9939" sodipodi:docname="New document 1">
            <defs id="defs4" />
            <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.29" inkscape:cx="-705.54166" inkscape:cy="1079.4797" inkscape:document-units="px" inkscape:current-layer="g4401" showgrid="false" inkscape:snap-page="true" inkscape:window-width="1317" inkscape:window-height="744" inkscape:window-x="49" inkscape:window-y="24" inkscape:window-maximized="1" />
            <metadata id="metadata7">
                <rdf:RDF>
                    <cc:Work rdf:about="">
                        <dc:format>image/svg+xml</dc:format>
                        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                        <dc:title></dc:title>
                    </cc:Work>
                </rdf:RDF>
            </metadata>
            <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
                <g id="g4401" transform="translate(-47.176358,-335.65218)">
                    <path style="font-size:639.27825928px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:#f7254f;font-family:Sans" id="path3018-2" d="m 288.42628,583.44701 c -3.1e-4,42.94224 -2.63966,79.89714 -7.91815,110.86481 -4.839,30.55501 -13.19706,57.39377 -25.07388,80.51635 -11.87744,23.12265 -27.71354,43.9743 -47.50861,62.555 -19.79538,18.58065 -44.42935,37.16133 -73.9021,55.74208 l -27.05357,-30.96782 c 17.15582,-10.32264 32.33216,-20.4388 45.52901,-30.34847 13.63666,-9.90971 25.29383,-20.23231 34.97162,-30.96783 10.11739,-11.14839 18.6953,-22.91614 25.73374,-35.30332 7.03813,-12.38706 12.97669,-26.01288 17.81579,-40.87752 l 7.91805,-35.30332 c 10.70996,-78.45226 7.25829,-156.67588 7.25829,-240.61999 l 0,-111.79384 42.22981,0 0,246.50387" inkscape:connector-curvature="0" />
                    <path style="font-size:639.27825928px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:#f7254f;font-family:Sans" id="path3934" d="m 245.66332,466.33633 -179.476134,-0.44585 0.08616,-34.68385 179.476134,0.44585" inkscape:connector-curvature="0" />
                    <path style="font-size:639.27825928px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:#f7254f;font-family:Sans" id="path3964-6" d="m 246.19124,597.05274 -157.701962,0.008 -0.0018,-35.30332 157.701962,-0.008" inkscape:connector-curvature="0" />
                    <path style="font-size:639.27825928px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:#f7254f;font-family:Sans" id="path3934-6" d="m 47.950828,725.37627 c 66.004112,-7.94002 127.549062,-24.79837 191.323592,-37.19755 -2.84254,12.63406 -5.68509,25.26811 -8.52763,37.90217 -58.78211,11.1248 -117.56423,22.2496 -176.346342,33.3744" inkscape:connector-curvature="0" />
                    <path style="font-size:639.27825928px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:#f7254f;font-family:Sans" id="path3014-1" d="m 375.55269,890.67245 0,-553.70468 42.22981,0 c 0,184.56823 0,369.13645 0,553.70468 l -42.22981,0" inkscape:connector-curvature="0" />
                    <path style="font-size:639.27825928px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:#f7254f;font-family:Sans" id="path3966" d="m 418.34972,432.41648 179.47671,0 0,34.68396 -179.47671,0" inkscape:connector-curvature="0" />
                    <path style="font-size:639.27825928px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:#f7254f;font-family:Sans" id="path3964" d="m 417.72126,562.40514 157.70196,0 0,35.30331 -157.70196,0" inkscape:connector-curvature="0" />
                    <path style="font-size:639.27825928px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:#f7254f;font-family:Sans" id="path3014" d="m 417.72126,698.0442 191.35384,0 0,34.06462 -191.35384,0" inkscape:connector-curvature="0" />
                </g>
            </g>
        </svg>



    </div>

script.js

    var paths = Array.prototype.slice.call(document.querySelectorAll('.character--animated path')),
        delay = 1;

    paths.map(function(path, idx) {

        window.path = path;
        var length = path.getTotalLength();
        console.log(delay);
        path.style.transition = path.style.WebkitTransition =
            'none';
        // Set up the starting positions
        path.style.strokeDasharray = length + ' ' + length;
        path.style.strokeDashoffset = length;
        path.style.fill = '#7EDBFF';
        // Trigger a layout so styles are calculated & the browser
        // picks up the starting position before animating
        path.getBoundingClientRect();
        // Define our transition
        path.style.transition = path.style.WebkitTransition =
            'stroke-dashoffset 0.8s ease-in-out ' + idx * 0.8 + 's, fill 0.2s ease-in-out ' + delay * 0.8 + 's';
        // Go!
        path.style.strokeDashoffset = '0';
        path.style.fill = '#D8283D';
        delay++;
    });

style.css

 body {
        background: #7EDBFF;
    }
    .character--animated {
        width: 565px;
        margin: 20px auto 0;
        -webkit-transition: -webkit-transform 5s ease-in-out;
    }
    svg {
        width: 100%;
        height: 580px;
    }