A Pen by Dinesh Vasudevan.

iebuc.markdown

iebuc

A Pen by Dinesh Vasudevan on CodePen.

License.

index.html

<script src="https://raw.githubusercontent.com/adobe-webplatform/Snap.svg/master/dist/snap.svg-min.js"></script>

 <svg id="travel-path" width="100%" height="100%" viewBox="0 0 620 420" preserveAspectRatio="xMidYMid meet"></svg>

script.js

var snapA = Snap('#travel-path');
var pointer = snapA.g().transform("translate(0 -1028.4)");

pointer.add(pointer.path("m12.031 1030.4c-3.8657 0-6.9998 3.1-6.9998 7 0 1.3 0.4017 2.6 1.0938 3.7 0.0334 0.1 0.059 0.1 0.0938 0.2l4.3432 8c0.204 0.6 0.782 1.1 1.438 1.1s1.202-0.5 1.406-1.1l4.844-8.7c0.499-1 0.781-2.1 0.781-3.2 0-3.9-3.134-7-7-7zm-0.031 3.9c1.933 0 3.5 1.6 3.5 3.5 0 2-1.567 3.5-3.5 3.5s-3.5-1.5-3.5-3.5c0-1.9 1.567-3.5 3.5-3.5z").attr({
  fill: "#c0392b"
}));

pointer.add(pointer.path("m12.031 1.0312c-3.8657 0-6.9998 3.134-6.9998 7 0 1.383 0.4017 2.6648 1.0938 3.7498 0.0334 0.053 0.059 0.105 0.0938 0.157l4.3432 8.062c0.204 0.586 0.782 1.031 1.438 1.031s1.202-0.445 1.406-1.031l4.844-8.75c0.499-0.963 0.781-2.06 0.781-3.2188 0-3.866-3.134-7-7-7zm-0.031 3.9688c1.933 0 3.5 1.567 3.5 3.5s-1.567 3.5-3.5 3.5-3.5-1.567-3.5-3.5 1.567-3.5 3.5-3.5z").attr({
  fill: "#e74c3c"
}).transform("translate(0 1028.4)"));
var myPathA = snapA.path("M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1").attr({
    id: "squiggle",
    fill: "none",
    strokeWidth: "10",
    stroke: "#ffffff",
    strokeMiterLimit: "10",
    strokeDasharray: "9 9",
    strokeDashOffset: "988.01"
  });
var len = myPathA.getTotalLength();

myPathA.attr({
    stroke: '#cceedd',
    strokeWidth: 5,
    fill: 'none',
    // Animate Path
    "stroke-dasharray": "22 6",
    "stroke-dashoffset": len
}).animate({"stroke-dashoffset": 10}, 2500, mina.easeinout);

var circleAttrs = {
                      fill: '#888888',
                      stroke: '#aaeeaa'
                    };
var startCircle = snapA
                    .circle(60, 15, 10)
                    .attr(circleAttrs);
var endCircle = snapA
                    .circle(575, 65, 10)
                    .attr(circleAttrs);

var wm = snapA.svg().add(pointer);

setTimeout( function() {
    Snap.animate(0, len, function( value ) {
        movePoint = myPathA.getPointAtLength( value );
        wm.attr({ x: movePoint.x - 10, y: movePoint.y - 10 });
    }, 3500, mina.easeinout);
});