<div class="container">
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;"
	 xml:space="preserve">
<defs>
  <mask id="handleMask">
<path class="handleMask" style="fill:#FFFFFF;" d="M487.463,183.88h-133.62c-15.537,0-15.537,0-15.537-15.537v-23.306
	c-0.259-15.537-0.259-15.537,15.537-15.537h133.62c8.545,0,15.537,6.992,15.537,15.537v23.306
	C503,176.888,496.008,183.88,487.463,183.88z"/>   
    <mask>
      <mask id="drillBitMask">
<polygon class="drillBitMask" style="fill:#FFFFFF;" points="81.625,307.25 85.75,301 172,301 172,312 86,312 "/>        
      </mask>
</defs>

    
    
<path class="handle" style="fill:#262626;" d="M487.463,183.88h-133.62c-15.537,0-15.537,0-15.537-15.537v-23.306
	c-0.259-15.537-0.259-15.537,15.537-15.537h133.62c8.545,0,15.537,6.992,15.537,15.537v23.306
	C503,176.888,496.008,183.88,487.463,183.88z"/>
<path class="neck" style="fill:#262626;" d="M328.397,183.88h-10.488c-2.564,0-4.661-2.098-4.661-4.661v-45.058
	c0-2.564,2.098-4.661,4.661-4.661h10.488c2.564,0,4.661,2.098,4.661,4.661v45.058C333.058,181.783,330.961,183.88,328.397,183.88z"
	/>
<rect class="shaft" x="143.021" y="148.902" style="fill:#262626;" width="165.035" height="15.577"/>

<g class="gripGroup" mask="url(#handleMask)" fill="#FCB827">
	<path d="M480.73,151.252H358.504c-3.418,0-6.215-2.797-6.215-6.215v0c0-3.418,2.797-6.215,6.215-6.215
		H480.73c3.418,0,6.215,2.797,6.215,6.215v0C486.945,148.455,484.148,151.252,480.73,151.252z"/>
	<path d="M480.73,174.558H358.504c-3.418,0-6.215-2.797-6.215-6.215v0c0-3.418,2.797-6.215,6.215-6.215
		H480.73c3.418,0,6.215,2.797,6.215,6.215v0C486.945,171.761,484.148,174.558,480.73,174.558z"/>
	<path d="M480.73,197.864H358.504c-3.418,0-6.215-2.797-6.215-6.215l0,0c0-3.418,2.797-6.215,6.215-6.215
		H480.73c3.418,0,6.215,2.797,6.215,6.215l0,0C486.945,195.067,484.148,197.864,480.73,197.864z"/>
</g>
<polygon class="tip" fill="#262626" points="140.425,164.478 89.929,158.478 89.929,154.902 140.425,148.902 "/>
<polygon class="finBot" fill="#262626" points="115.177,170.536 89.929,164.478 89.929,164.478 89.929,157.591 140.425,162.591 
	140.425,164.478 "/>
<polygon class="finTop" fill="#262626" points="115.177,142.844 89.929,148.902 89.929,148.902 89.929,155.789 140.425,150.789 
	140.425,148.902 "/>
    
    <!--DRILL-->
<g class="drillBodyGroup" fill="#262626">
<path class="trigger" stroke-miterlimit="10" d="M376,365.125c0,0,19.25-0.688,23,8.563s12.25,30.813,12.25,34.813
		c-10.5,0-39.25,0-39.25,0S385.75,394.75,376,365.125z"/>	<polygon  stroke-miterlimit="10" points="174.5,296.5 201.5,283 201.5,330 174.5,317 	"/>
	<rect x="206.5" y="276.5"  stroke-miterlimit="10" width="41" height="60"/>
	<polygon class="barrel"  stroke-miterlimit="10" points="250.5,334 250.5,279 257.5,283 257.5,300.5 260.5,300.5 
		260.5,272 294.5,268.667 294.5,345 260.5,341.333 260.5,314 257.5,313.833 257.5,329 	"/>
	<path class="drillBody" stroke="#FCB827" stroke-width="3"  stroke-miterlimit="10" d="M297.5,269v77c0,0,0.75,7.75,7.5,9.25s80.5,7,80.5,7s13.75,1,17.5,11
		s19.25,60,20.75,73s-4.5,21.5-4.5,21.5l-8.5,12.75H509c0,0-6.5-35.75-15-56.75S474.25,377.5,474.5,368s7.75-15.5,14.75-16.75
		c0-12.5-0.25-90.75-0.25-90.75s-170.657,0-174,0S297.5,261.841,297.5,269z"/>
	
	<path  stroke-miterlimit="10" d="M512.667,536.667h-138c-2.75,0-5-2.25-5-5v-43c0-2.75,2.25-5,5-5h138
		c2.75,0,5,2.25,5,5v43C517.667,534.417,515.417,536.667,512.667,536.667z"/>
	<path stroke-miterlimit="10" d="M493.5,261v90c0,0,14-5,18.75-8.5s8-4.5,7.75-14.25
		s-1.25-53.75-1.25-53.75s1.25-7-6-9.25S493.5,261,493.5,261z"/>
<path class="clasp" stroke="#FCB827" stroke-width="3" stroke-miterlimit="10" d="M480.945,510.167H443.5
		c-3.3,0-6-2.7-6-6V475c0-3.3,2.7-6,6-6h37.445c3.3,0,6,2.7,6,6v29.167C486.945,507.467,484.245,510.167,480.945,510.167z"/>  
</g>
<polygon class="drillBit" style="fill:#262626;stroke:none;stroke-miterlimit:10;" points="81.625,306.75 85.75,301.5 172.5,301.5 
	172.5,311.5 86,311.5 "/>

<g class="drillGrooveGroup" style="fill:none;stroke:#FCB827;stroke-width:3;stroke-miterlimit:10;" mask="url(#drillBitMask)">
  
	<line  x1="94.5" y1="299" x2="104.875" y2="312"/>
	<line x1="107.5" y1="299" x2="117.875" y2="312"/>
	<line x1="120.5" y1="299" x2="130.875" y2="312"/>
	<line x1="133.5" y1="299" x2="143.875" y2="312"/>
	<line x1="146.5" y1="299" x2="156.875" y2="312"/>
	<line x1="159.5" y1="299" x2="169.875" y2="312"/>
	<line x1="81.5" y1="299" x2="91.875" y2="312"/>
<line x1="68.5" y1="299.5" x2="78.875" y2="312.875"/>  
</g>    
    
<g class="drillDetailsGroup" stroke="#FCB827" stroke-width="2" >
	<line fill="none" x1="442" y1="282" x2="471" y2="282"/>
	<line fill="none" x1="442" y1="289" x2="471" y2="289"/>
	<line fill="none" x1="442" y1="296" x2="471" y2="296"/>
	<line fill="none" x1="442" y1="303" x2="471" y2="303"/>
	<line fill="none" x1="442" y1="310" x2="471" y2="310"/>
	<line fill="none" x1="442" y1="317" x2="471" y2="317"/>
	<line fill="none" x1="442" y1="324" x2="471" y2="324"/>
	<circle fill="none" cx="453" cy="351" r="7.75"/>
</g>
<g class="drillVentGroup" fill="#FCB827">
	<path d="M325.667,284h-10.418c-0.55,0-1-0.45-1-1v-6c0-0.55,0.45-1,1-1h10.418c0.55,0,1,0.45,1,1v6
		C326.667,283.55,326.217,284,325.667,284z"/>
	<path d="M325.667,298h-10.418c-0.55,0-1-0.45-1-1v-6c0-0.55,0.45-1,1-1h10.418c0.55,0,1,0.45,1,1v6
		C326.667,297.55,326.217,298,325.667,298z"/>
	<path d="M325.667,312h-10.418c-0.55,0-1-0.45-1-1v-6c0-0.55,0.45-1,1-1h10.418c0.55,0,1,0.45,1,1v6
		C326.667,311.55,326.217,312,325.667,312z"/>
	<path d="M325.667,326h-10.418c-0.55,0-1-0.45-1-1v-6c0-0.55,0.45-1,1-1h10.418c0.55,0,1,0.45,1,1v6
		C326.667,325.55,326.217,326,325.667,326z"/>
	<path d="M325.667,340h-10.418c-0.55,0-1-0.45-1-1v-6c0-0.55,0.45-1,1-1h10.418c0.55,0,1,0.45,1,1v6
		C326.667,339.55,326.217,340,325.667,340z"/>
</g>    
    
    <text class="myText" x="35" y="455"><tspan style="font-size:102px;">SVG</tspan><tspan style="font-size:64px;" dx="-210" dy="46">TOOLS</tspan></text>   
</svg>


</div>

@import url(https://fonts.googleapis.com/css?family=Black+Ops+One);
body{
  background-color:#FCB827;
  overflow:hidden;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container{
  max-width:600px;
  height:600px;
}

svg{
  max-width:100%;
}
.myText{
  font-family: 'Black Ops One', cursive;

  fill:#262626;
}

var xmlns="http://www.w3.org/2000/svg", select = function(s) {
      return document.querySelector(s);
    }, selectAll = function(s) {
      return document.querySelectorAll(s);
    }, container = select('.container'), grips = selectAll('.gripGroup path'), finTop = select('.finTop'), finBot = select('.finBot'), tip = select('.tip'), trigger = select('.trigger'), drillGrooves = selectAll('.drillGrooveGroup line'), drillVents = selectAll('.drillVentGroup path'), drillDetails = selectAll('.drillDetailsGroup line')

//center the container cos it's pretty an' that
TweenMax.set(container, {
  position:'absolute',
  top:'50%',
  left:'50%',
  xPercent:-50,
  yPercent:-50
})

var tl = new TimelineMax({repeat:-1});
tl.timeScale(3)
tl.to(grips, 2, {
  y:-23,
  //ease:Linear.easeNone
  ease:Anticipate.easeIn
})
.to(finTop, 2, {
  //y:10,
  scaleY:0,
  transformOrigin:'50% 100%',
  //ease:Linear.easeNone
  ease:Anticipate.easeIn
},'-=2')
.to(finBot, 2, {
  //y:-10,
  scaleY:0,
  transformOrigin:'50% 0%',
  //ease:Linear.easeNone
  ease:Anticipate.easeIn
},'-=2')
/*
.to(tip, 2, {
  scaleY:0.7,
  transformOrigin:'50% 50%',
  ease:Anticipate.easeIn
},'-=2')
*/
.set(grips, {
  y:0
})

.to(grips, 2, {
  y:-23,
  //ease:Linear.easeNone
  ease:Anticipate.easeIn
})
.to(finTop, 2, {
  y:0,
  scaleY:1,
  transformOrigin:'50% 100%',
  //ease:Linear.easeNone
  ease:Anticipate.easeIn
},'-=2')
.to(finBot, 2, {
  y:0,
  scaleY:1,
  transformOrigin:'50% 0%',
  //ease:Linear.easeNone
  ease:Anticipate.easeIn
},'-=2')
/*
.to(tip, 2, {
  scaleY:1,
  transformOrigin:'50% 50%',
  ease:Anticipate.easeIn
},'-=2')
*/
var drillBitTl = new TimelineMax();
drillBitTl.to(drillGrooves, 0.2, {
  x:13,
  repeat:20,
  ease:Linear.easeNone
})
var drillTl = new TimelineMax({repeat:-1, repeatDelay:1});
drillTl.timeScale(1)
drillTl.to(trigger, 0.3, {
  //rotation:-10,
  x:10,
  transformOrigin:'10% 0%',
  repeat:1,
  yoyo:true,
  ease:Sine.easeIn
})
.to(drillBitTl, 3, {
  time:drillBitTl.duration(),
  ease:Sine.easeOut
},'-=0.6')
.staggerTo(drillVents, 0.1, {
  fill:'#262626',
  repeat:21,
  yoyo:true,
  ease:Sine.easeOut
},0.06, '-=3')
.staggerTo(drillDetails, 0.1, {
  stroke:'#262626',
  repeat:21,
  yoyo:true,
  ease:Sine.easeOut
},0.06, '-=3')