<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <title>SVG Download</title>
  <defs>
    <clipPath id="mainCircleMask">
<circle fill="none" stroke="#000000" stroke-width="14.9511" stroke-miterlimit="10" cx="400" cy="319.7" r="121"/>    
    </clipPath>
  </defs>
<path id="outlineBg" stroke="#CFD8DC" d="M400,192.12A127.62,127.62,0,1,0,527.62,319.73,127.62,127.62,0,0,0,400,192.12z" fill="none" stroke-miterlimit="10" stroke-width="15"/>
  <line id="baseStart" x1="338" y1="431.5" x2="461" y2="431.5" fill="none" stroke="#607D8B" stroke-miterlimit="10" stroke-width="15"/>
   <path id="outline" stroke="#607D8B" d="M400,192.12A127.62,127.62,0,1,0,527.62,319.73,127.62,127.62,0,0,0,400,192.12z" fill="none" stroke-miterlimit="10" stroke-width="15"/>
  <path id="baseEnd" stroke="none" d="M338.37,431.5a127.74,127.74,0,0,0,123.26,0" fill="none" stroke="#607D8B" stroke-miterlimit="10" stroke-width="15"/>
  <g clip-path="url(#mainCircleMask)">
  <polygon id="arrow" fill="#607D8B" points="427,344 462.7,344 400,407.6 337.3,344 373,344 373,290 427,290 "/>  
    <polygon id="tick" fill="#4BAE4F" points="386,381.2 340.9,336.1 362,312 386,336.1 453.8,260.8 476.4,284.9 "/>
  </g>
 <path id="hit" stroke="#607D8B" fill="transparent" d="M400,192.12A127.62,127.62,0,1,0,527.62,319.73,127.62,127.62,0,0,0,400,192.12z" stroke-miterlimit="10" stroke-width="0"/>    
</svg>
body {
  background-color:#eceff1;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{
  width:100%;
  height:100%;
  visibility:hidden;
 
}

#hit{
  cursor:pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);

}
MorphSVGPlugin.convertToPath('line, polygon');

var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  arrow = select('#arrow'),
  baseStart = select('#baseStart'),
  outlineBg = select('#outlineBg'),
  tick = select('#tick'),
  baseEnd = select('#baseEnd'),
  baseStartPath = baseStart.getAttribute('d'),
  hit = select('#hit'),
  outline = select('#outline')

TweenMax.set('svg', {
  visibility: 'visible'
})

TweenMax.set(outline, {
  stroke: 'transparent',
  drawSVG: '41.9% 57.9%'
})
TweenMax.set(outlineBg, {
  //stroke:'transparent',
  drawSVG: '50% 50%'
})

var tl = new TimelineMax({
  repeat: 0
});
tl.to(arrow, 0.5, {
    y: -50,
    ease: Power1.easeOut
  })
  .to(arrow, 0.5, {
    y: 40,
    ease: Power3.easeIn
  })
  .to(baseStart, 0.05, {
    morphSVG: {
      shape: baseEnd
    },
    ease: Linear.easeNone
  }, '-=0.05')
  .to(arrow, 2, {
    y: -20,
    //delay:0.2,
    ease: Elastic.easeOut.config(0.8, 0.6)
  })
  .set(outline, {
    stroke: '#607D8B'
  }, '-=2')
  .set(baseStart, {
    stroke: 'transparent'
  }, '-=2')
  .to(outline, 2, {
    drawSVG: '100% 100%',
    ease: Anticipate.easeOut
  }, '-=2')
  .to(outlineBg, 2, {
    drawSVG: '0% 100%',
    ease: Anticipate.easeOut
  }, '-=2')

.to(outline, 4, {
    drawSVG: '100% 0%',
    ease: SteppedEase.config(36)
  }, '-=0')
  /* .to(outline, 2, {
    drawSVG:'0% 100%',
    ease:Anticipate.easeOut
  },'-=2')
   */
  /* .to(arrow, 1, {
    morphSVG:{shape:tick},
    ease:Elastic.easeOut.config(0.5, 0.4)
  }) */

.to(arrow, 1.2, {
    y: 200,
    ease: Anticipate.easeOut
  })
  .from(tick, 1.2, {
    y: -200,
    //ease:Anticipate.easeIn,
    ease: Power3.easeInOut,
    transformOrigin: '50% 50%'
  }, '-=1.2')

.fromTo(arrow, 1, {
    y: -220
  }, {
    y: 0,
    delay: 1,
    immediateRender: false,
    ease: Anticipate.easeOut
  })
  .to(tick, 1, {
    y: 200,
    ease: Anticipate.easeIn,
    transformOrigin: '50% 50%'
  }, '-=1')
  .staggerTo([outline, outlineBg], 1, {
    cycle: {
      drawSVG: ['41.9% 57.9%', '50% 50%']
    },
    ease: Power2.easeInOut
  }, 0.1, '-=1')

.set(outline, {
    stroke: 'transparent'
  })
  .set(baseStart, {
    stroke: '#607D8B'
  })
  .to(baseStart, 1, {
    morphSVG: {
      shape: baseStartPath
    },
    ease: Elastic.easeOut.config(1, 0.4)
  })
tl.stop(0)
  //ScrubGSAPTimeline(tl);

hit.onclick = function() {

  if (tl.time() == 0) {
    tl.play()
  } else {
    tl.seek(0)
  }
}

tl.timeScale(1.52);
//ScrubGSAPTimeline(tl)
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
  2. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js
  3. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/AnticipateEase.min.js