Dustin's Words: SVG Play With Me

dustin-s-words-svg-play-with-me.markdown

Dustin's Words: SVG Play With Me

Fun little interactive icon inspired by the brilliant icon designs for Dustin's Words.

https://thenounproject.com/dustinswords/

A Pen by Chris Gannon on CodePen.

License.

index.html

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" >

<line class="seesaw" fill="none" stroke="#000000" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="87.9" y1="484.8" x2="511.1" y2="269.2"/>
<g class="person">
	<path d="M179.1,428.8c-3-7-8.6-11.5-15.8-12.5v-30.2c0-14.9-8.6-28.3-20.6-35c12.5-6.7,20.6-19.7,20.6-35
		c0-22.1-17.8-39.8-39.8-39.8s-38.9,18.7-38.9,40.3c0,14.9,8.6,28.3,20.6,35c-12.5,6.7-20.6,19.7-20.6,35v35
		c0,16.3,9.6,30.2,24,36.5c6.3,2.8,17.3,2.9,17.3,2.9h11v11.5c0,12.5,9.1,22.6,21.1,23c0.5,0,1,0,1,0c5.8,0,11.5-2.4,15.8-6.7
		c4.3-4.3,6.7-9.6,6.7-15.8c0,0,0-31.2,0-35C181,434,180.5,432,179.1,428.8z"/>
	<path fill="#FFFFFF" d="M94.1,316.5c0-16.8,13.4-30.2,30.2-30.2s30.2,13.4,30.2,30.2s-13.4,30.2-30.2,30.2S94.1,333.3,94.1,316.5z"
		/>
	<path fill="#FFFFFF" d="M171.9,473.5h-0.5c0,3.4-1.4,6.7-3.8,9.1c-2.4,2.4-5.8,3.8-9.1,3.8H158c-6.7-0.5-12-6.2-12-13.4v-21.6
		h-22.1c-16.3,0-29.8-13.4-29.8-30.2v-35c0-16.8,13.4-30.2,30.2-30.2s30.2,13.4,30.2,30.2V426h6.7c5.8,0,10.6,4.8,10.6,10.6V473.5z"
		/>
</g>
<g class="arrow">
	<polygon points="503,195.7 503,98.3 439.2,98.3 439.2,195.7 396,195.7 470.9,253.8 546.2,195.7 	"/>
	<polygon fill="#FFFFFF" points="424.3,205.3 448.8,205.3 448.8,107.9 493.4,107.9 493.4,205.3 517.9,205.3 471.4,241.8 	"/>
</g>
<g class="fulcrum">
	<g>
		<path d="M339.8,479V377.2c0-4.8-1.2-9-2.4-13s-4.3-9.1-4.3-9.1c-7.2-10.6-19.2-17.8-33.1-17.8c-22.1,0-39.8,17.8-39.8,39.8v7.2
			l0.5,10.6v84H240v9.6h120V479H339.8z"/>
		<path fill="#FFFFFF" d="M330.7,477.1h-60.5v-99.8c0-16.8,13.4-30.2,30.2-30.2c16.8,0,30.2,13.4,30.2,30.2V477.1z"/>
	</g>
	<circle cx="300.5" cy="377.2" r="8.6"/>
</g>
</svg>

  
</div>

script.js

var container = document.querySelector('.container'),person = document.querySelector('.person'),arrow = document.querySelector('.arrow'),seesaw = document.querySelector('.seesaw'), bottle = document.querySelector('.bottle'), fulcrum = document.querySelector('.fulcrum')

TweenMax.set(container, {
  position:'absolute',
  top:'50%',
  left:'50%',
  xPercent:-50,
  yPercent:-50
})

TweenMax.set(seesaw, {transformOrigin:"50% 50%"});

Draggable.create(arrow, {
  type:'y',
  bounds:{maxY:0, minY:165},
  onDrag:onDrag,
  throwProps:true,
  onThrowUpdate:onDrag,
  snap:[0],
  maxDuration:1.22,
  minDuration:1,
  overshootTolerance:0,
  ease:Bounce.easeOut
})

function onDrag(e){
  
  TweenMax.set(person, {
    y:-arrow._gsTransform.y
  })
  TweenMax.set(seesaw, {
    rotation:arrow._gsTransform.y/Math.PI
  })  
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>

style.css

body{
  background-color:#059EFF;
  overflow:hidden;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

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

svg{
  max-width:100%;
}