<div class="logo_aaa">
  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" version="1.1" viewBox="0 0 339.1093 80.7484" enable-background="new 0 0 339.1093 80.7484" xml:space="preserve">
    <g class="wrap">
            <defs>
                <mask id="aaa_mask_1_" width="72.9574" height="69.5648" x="0" y="0" maskUnits="userSpaceOnUse">
                        <path id="a1_1_" fill="#FFFFFF" d="M31.0089,51.9952c-1.8731,3.1474-4.043,6.5937-5.959,9.83h46.6074 C59.8966,41.4483,48.3096,21.419,36.505,0.9561c-11.7178,20.5078-23.2178,40.623-34.8477,61H13.505 c7.6679-13.4238,15.1816-26.3994,23.1523-40.3486c6.1855,10.7138,11.6211,19.9228,17.6758,30.374 C46.0577,51.9805,38.8487,51.9952,31.0089,51.9952z"/>
                </mask>

                <mask id="aaa_mask_2_" width="44.2081" height="65.4473" x="46.9584" y="3.7164" maskUnits="userSpaceOnUse">
                        <path id="l_2_" fill="#FFFFFF" d="M48.6573,10.9561c9.9766,17.1719,19.7773,34.1719,29.5361,51c3.8955,0,7.5264,0,11.4639,0 c-9.9766-17.1719-19.7773-34.1738-29.5361-51C56.2276,10.9561,52.6397,10.9561,48.6573,10.9561z"/>
                </mask>

                <mask id="aaa_mask_3_" width="53.1446" height="54.6065" x="70.2711" y="21.2627" maskUnits="userSpaceOnUse">
                        <path id="e_2_" fill="#FFFFFF" d="M112.0987,41.1534c-3.0615,5.6328-6.166,10.6601-9.5332,16.4218 c-1.9228-3.248-5.2031-8.7519-5.2031-8.7519l-0.0244-0.0391l15.3193-26.8281H72.0948c10.0137,17.332,20.415,34.8828,30.4717,52 c6.4277-11.1367,12.751-21.5352,19.0908-32.8027H112.0987z M92.3253,40.4786l-5.7481-9.5225h11.0557L92.3253,40.4786z"/>
                </mask>

                <mask id="aaa_mask_4_" width="38.4036" height="55.5584" x="114.5794" y="13.4734" maskUnits="userSpaceOnUse">
                        <path id="x1_2_" fill="#FFFFFF" d="M140.3516,62.0694h7.8047l3.1221,0.0215l-22.9795-40.2442h-11.1865L140.3516,62.0694z"/>
                </mask>

                <mask id="aaa_mask_5_" width="50.8168" height="78.1167" x="106.4978" y="2.6317" maskUnits="userSpaceOnUse">
                        <path id="x2_2_" fill="#FCFCFC" d="M155.6573,9.9561h-11.2285l-35.7715,63h11.0566L155.6573,9.9561z"/>
                </mask>

                <mask id="aaa_mask_6_" width="70.2159" height="64.3994" x="146.1278" y="0.8657" maskUnits="userSpaceOnUse">
                        <path id="a2_2_" fill="#FFFFFF" d="M168.6866,61.8897c15.8184,0.0449,31.1094,0.0449,46.9707,0.0449 C203.7393,41.462,192.085,21.3848,180.21,0.9561c-10.3007,17.9434-30.5527,53.5283-30.5527,53.5283l4.5264,7.4717l2.542-0.0215 c7.7548-13.4726,15.5107-26.9453,23.5273-40.9004c6.2236,10.7617,12.0947,20.8223,18.1865,31.3203h-24.0576 C172.4971,55.5049,170.6573,58.5645,168.6866,61.8897z"/>
                </mask>

                <mask id="aaa_mask_7_" width="44.016" height="65.0177" x="191.0857" y="3.775" maskUnits="userSpaceOnUse">
                        <path id="l2_2_" fill="#FFFFFF" d="M233.6573,61.9561c-10.0195-17.2744-19.8223-34.2031-29.5361-51 c-3.8946,0-7.5694,0-11.4639,0c9.9316,17.1865,19.7344,34.1152,29.5361,51C225.9991,61.9561,229.6319,61.9561,233.6573,61.9561z"/>
                </mask>

                <mask id="aaa_mask_8_" width="62.627" height="61.3818" x="213.3915" y="13.7709" maskUnits="userSpaceOnUse">
                        <path id="o_2_" fill="#FFFFFF" d="M216.6573,22.9561c9.9922,16.8691,19.7676,33.8711,29.7607,51 c9.8623-17.1738,19.4639-34.1309,29.2393-51C255.8448,22.9561,236.5108,22.9561,216.6573,22.9561z M231.168,31.1748 c10.3838,0,19.7686,0,30.1084,0c-5.1269,9.084-9.5371,17.2774-14.7929,26.4903 C241.1827,48.4952,236.338,40.2588,231.168,31.1748z"/>
                </mask>

                <mask id="aaa_mask_10_" width="63.8537" height="59.8889" x="275.2556" y="8.7108" maskUnits="userSpaceOnUse">
                        <path id="a3_2_" fill="#FFFFFF" d="M307.3526,27.376c6.793,11.9199,13.3233,23.2725,19.8115,34.5801 c3.1778,0,6.9668,0,10.4932,0c-9.9277-17.4199-20.0283-34.7969-29.8691-52c-10.0577,17.377-20.1592,34.7109-30.1309,51.957 l9.7539,0.0205l0.0127-0.0205h29.5527c-1.6982-2.7949-3.1357-5.2402-4.789-7.9472l-20.2705,0.0742l1.498-2.6231 C298.1046,43.3077,302.6202,35.5235,307.3526,27.376z"/>
                </mask>

                <mask id="aaa_mask_9_" width="44.4317" height="66.6345" x="258.1278" y="2.3728" maskUnits="userSpaceOnUse">
                        <g id="i_2_" fill="#FFFFFF">
                            <path id="i1.2_2_" d="M300.6573,9.9561h-11.4756c-0.833,1.6104-2.0605,3.918-2.9805,5.6602h11.3467 C298.336,14.1807,299.6065,11.8291,300.6573,9.9561z"/>
                            <path id="i1.1_2_" d="M294.2198,21.3663h-11.4775c-7.71,13.5-15.3321,26.9589-23.085,40.5898h11.4766 C278.712,48.585,286.377,35.128,294.2198,21.3663z"/>
                        </g>
                </mask>
            </defs>

        <g class="lines">
            <path stroke-width="11" d="M4.7812 66.8463L36.5155 11.0338 63.4062 57.2838 23.5312 57.3463" mask="url(#aaa_mask_1_)"/>
            <path stroke-width="11" d="M51.7187 6.4713L86.4062 66.4088" mask="url(#aaa_mask_2_)"/>
            <path stroke-width="8.5" d="M93.5312 46.5963L104.9687 26.3463 79.0312 26.2838 102.4062 65.9713 119.0937 37.2838" mask="url(#aaa_mask_3_)"/>
            <path stroke-width="11" d="M119.3437 16.2213L148.2187 66.2838" mask="url(#aaa_mask_4_)"/>
            <path stroke-width="11" d="M111.2812 78.0338L152.5312 5.3463" mask="url(#aaa_mask_5_)"/>
            <path stroke-width="10" d="M150.4687 62.7838L180.1562 10.8463 207.5937 57.6588 167.2187 57.4713" mask="url(#aaa_mask_6_)"/>
            <path stroke-width="11" d="M195.8437 6.5338L230.3437 66.0338" mask="url(#aaa_mask_7_)"/>
            <path stroke-width="9"  d="M217.2812 16.0338L246.4062 66.0963 268.3437 27.1588 226.0937 26.9088" mask="url(#aaa_mask_8_)"/>
            <path stroke-width="11" d="M262.9062 66.2838L297.7812 5.0963" mask="url(#aaa_mask_9_)"/>
            <path stroke-width="10" d="M317.4687 58.6588L283.9687 58.6588 307.3437 18.6588 334.7812 66.0963" mask="url(#aaa_mask_10_)"/>
        </g>
    </g>
</svg>
</div>

body {
  background: #000;
}


.lines path {
  fill: none;
  stroke: #aaff00;
  stroke-miterlimit: 10;
  opacity: 0;
  visibility: hidden;
}

function init(){
  var logo = d3.selectAll(".logo_aaa"),
      line = logo.selectAll('.lines path'),
      logoTL = new TimelineLite();
  
    TweenLite.set(line, {drawSVG: 0});
    logoTL.to(line[0][0], 1, {drawSVG:'100%', autoAlpha: 1}, 0)
    logoTL.to(line[0][1], 1, {drawSVG:'100%', autoAlpha: 1}, .4)
    logoTL.to(line[0][2], 1, {drawSVG:'100%', autoAlpha: 1}, .7)
    logoTL.to(line[0][3], 1, {drawSVG:'100%', autoAlpha: 1}, 1)
    logoTL.to(line[0][4], 1, {drawSVG:'100%', autoAlpha: 1}, 1.1)
    logoTL.to(line[0][5], 1, {drawSVG:'100%', autoAlpha: 1}, 1.3)
    logoTL.to(line[0][6], 1, {drawSVG:'100%', autoAlpha: 1}, 1.6)
    logoTL.to(line[0][7], 1, {drawSVG:'100%', autoAlpha: 1}, 1.9)
    logoTL.to(line[0][8], 1, {drawSVG:'100%', autoAlpha: 1}, 2.1)
    logoTL.to(line[0][9], 1, {drawSVG:'100%', autoAlpha: 1}, 2.3)
  
}


init();