Sample

<svg class="svg" width="162px" height="236px" viewBox="0 0 162 236" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

            <g id="Uppwork" sketch:type="MSLayerGroup">

                <path d="M9.39274297,8.94594823 L155.796198,18.2418709" id="a" stroke="#979797" sketch:type="MSShapeGroup"></path>

                <path d="M153.739957,20.1019573 L44.2631626,62.3315551" id="b" stroke="#979797" sketch:type="MSShapeGroup"></path>

                <path d="M39.8936506,66.5274591 L41.0976338,223.65403" id="d" stroke="#979797" sketch:type="MSShapeGroup"></path>

                <path d="M41.0784066,229.00206 L155.702567,20.8076628" id="e" stroke="#979797" sketch:type="MSShapeGroup"></path>

                <path d="M7.80997855,11.5635971 L40.1394074,62.8839444" id="c" stroke="#979797" sketch:type="MSShapeGroup"></path>

                <circle id="A" fill="#D8D8D8" sketch:type="MSShapeGroup" cx="8.5" cy="9.5" r="8.5"></circle>

                <circle id="B" fill="#D8D8D8" sketch:type="MSShapeGroup" cx="153.5" cy="18.5" r="8.5"></circle>

                <circle id="C" fill="#D8D8D8" sketch:type="MSShapeGroup" cx="41.5" cy="64.5" r="8.5"></circle>

                <circle id="D" fill="#D8D8D8" sketch:type="MSShapeGroup" cx="41.5" cy="227.5" r="8.5"></circle>

                <circle id="Coin" fill="#9F9F9F" sketch:type="MSShapeGroup" cx="9.5" cy="9.5" r="9.5"></circle>

            </g>

        </g>

    </svg>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

.svg{

  display:block;

  margin:0 auto;

  margin-top:10%;

  visibility:hidden;

  padding:2%;

}

var main_tl = new TimelineMax({repeat: -1});

main_tl.from('svg', 1, {autoAlpha: 0})

  .add(animationOne())

  function animationOne() {

    var pathFirst = [{x:0, y:0}, {x:145, y:9 }];

    var path1 = [{x:0, y:0}, {x:145, y:9 }, {x:34, y:57}, {x:0, y:0}];

    var path2 = [{x:0, y:0}, {x:145, y:9 }, {x:34, y:57}, {x:0, y:0}, {x:34, y:57}, {x:34, y:217}, {x:145, y:9 } ];

    var tl = new TimelineMax();

    tl.from( "#A", 1, { opacity:0, ease:Power3.easeOut }, "first" )

    .from( "#B", 1, { opacity:0, ease:Power3.easeOut}, "second" )

    .from( "#a", 0.5, { opacity:0, ease:Power3.easeOut }, "third" )

    .from( "#Coin", 0.01, { opacity:0, ease:Power3.easeOut }, "fourth" )

    .to( "#Coin", 1, {bezier:{curviness:0.0, values: pathFirst} }, "fifth" )

    .to("#Coin", 0.1, { opacity:0, ease:Power3.easeOut }, "#six")

    .to( "#Coin", 0.01, { opacity:0, x:0, y:0 }, "six" )

    .add("six", "-=0.5")

    .from( "#C", 1, { opacity:0, ease:Power3.easeOut }, "six" )

    .from( "#b", 0.5, { opacity:0, ease:Power3.easeOut }, "seven" )

    .from( "#c", 0.5, { opacity:0, ease:Power3.easeOut }, "eight" )

    .to( "#Coin", 0.01, { opacity:1, ease:Power3.easeOut }, "nine" )

    .to( "#Coin", 2, {bezier:{curviness:0.0, values: path1} }, "nine" )

    .to( "#Coin", 0.01, { opacity:0 }, "tenOne" )

    .add("tenTwo", "-=1")

    .from( "#D", 1, { opacity:0, ease:Power3.easeOut }, "tenTwo" )

    .from( "#d", 0.5, { opacity:0, ease:Power3.easeOut }, "eleven" )

    .from( "#e", 0.5, { opacity:0, ease:Power3.easeOut }, "twelve" )

    .to( "#Coin", 0.01, { opacity:1 }, "twelwe" )

    .to( "#Coin", 3, {bezier:{curviness:0.0, values: path2}, ease:Power0.easeNone,}, "thirteenth" )

    return tl;

  }