Perpetual Pencil

index.html

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
 <defs>
  
 <pattern id="graph" 
           x="28" y="8" width="30" height="30"
           patternUnits="userSpaceOnUse">
  <line x1="0" x2="800" y1="0" y2="0" stroke="#CBCFE9" stroke-width="1"/> 
  <line x1="10" x2="10" y1="0" y2="600" stroke="#CBCFE9" stroke-width="1"/> 
  
  </pattern>
      <filter id="edgeClean" color-interpolation-filters="sRGB">
        <feComponentTransfer>
          <feFuncA type="table" tableValues="0 .5 1 1" />
        </feComponentTransfer>
      </filter>    
  </defs>
 <rect fill="url(#graph)" width="800" height="600"/>
 
  <path class="shadowEnd" opacity="0" d="M329.6,145.3l-23.1-9.1l-24.7-9.7c-2-0.8-5.6-0.9-7.9-0.3L29,193.6L8,212.8l0,0l-8,7.3
    l14.7-0.8l0.3,0l8.3-0.5l0,0l61-3.4l244.9-67.4C331.4,147.3,331.6,146.1,329.6,145.3z"/>
 <path class="shadow" opacity="0" d="M329.6,145.3l-23.1-9.1l-24.7-9.7c-2-0.8-5.6-0.9-7.9-0.3L29,193.6L8,212.8l0,0l-8,7.3
    l14.7-0.8l0.3,0l8.3-0.5l0,0l61-3.4l244.9-67.4C331.4,147.3,331.6,146.1,329.6,145.3z"/> 
<g class="drawing">
  <g class="pencilFills">
    <path fill="#FFC334" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" d="M291.9,361.3
      c-13.6-2.9-19.4-10.3-20.8-23.5l179.7-159.3c1.7-1.5,4.3-1.3,5.8,0.3l18.1,20.4L291.9,361.3z"/>
    <path fill="#FBCA7E" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" d="M291.9,361.3
      c2.3,13.7,9.6,21.2,19.7,22.2l-44.7,10.1L255.6,381l15.4-43.2C272.4,350.9,278.3,358.4,291.9,361.3z"/>
    <path fill="#E2AF38" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" d="M491.2,224.1L311.5,383.4
      c-10.1-1-17.4-8.5-19.7-22.2l182.8-162l16.9,19.1C493,220,492.9,222.6,491.2,224.1z"/>
    <polygon fill="#39434D" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" points="266.8,393.6 249.7,397.4 
      255.6,381     "/>
  </g>
  <g class="pencilOutlines" stroke-width="2">
    <path class="pencilOutline" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" d="M311.5,383.4
      l179.7-159.3c1.7-1.5,1.9-4.1,0.3-5.8l-16.9-19.1l-18.1-20.4c-1.5-1.7-4.1-1.9-5.8-0.3L271,337.8c1.4,13.2,7.3,20.6,20.8,23.5
      C294.1,374.9,301.4,382.4,311.5,383.4z"/>
    <polyline class="ridge" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" points="291.2,361.9 
      291.9,361.3 474.6,199.2     "/>
    
      <line class="tipTop" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" x1="255.6" y1="381" x2="271" y2="337.8"/>
    
      <line class="tipBot" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" x1="311.5" y1="383.4" x2="266.8" y2="393.6"/>
    <polygon class="lead" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" points="249.7,397.4 
      266.8,393.6 255.6,381 249.7,397.4     "/>
  </g>
</g>

<g class="pencil">
  
  <g>
    <path fill="#FFC334" d="M42.3,183.8c-13.6-2.9-19.4-10.3-20.8-23.5L201.2,1c1.7-1.5,4.3-1.3,5.8,0.3l18.1,20.4L42.3,183.8z"/>
    <path fill="#FBCA7E" d="M42.3,183.8C44.6,197.5,51.9,205,62,206l-51,11.6l-7.1-8l17.6-49.3C22.9,173.5,28.7,180.9,42.3,183.8z"/>
    <path fill="#E2AF38" d="M241.7,46.7L62,206c-10.1-1-17.4-8.5-19.7-22.2l182.8-162L242,40.9C243.5,42.6,243.4,45.2,241.7,46.7z"/>
    <polygon fill="#39434D" points="17.2,216.2 0.2,220 6,203.6    "/>
  </g>
  <g>
    <path fill="none" d="M21.5,160.3L201.2,1c1.7-1.5,4.3-1.3,5.8,0.3l18.1,20.4L242,40.9c1.5,1.7,1.3,4.3-0.3,5.8L62,206
      c-10.1-1-17.4-8.5-19.7-22.2C28.7,180.9,22.9,173.5,21.5,160.3z"/>
    <polyline fill="none" points="225.1,21.8 42.3,183.8 41.6,184.4    "/>
    <polyline fill="none" points="62,206 10.9,217.6 0.2,220 3.9,209.6 21.5,160.3    "/>
    <line fill="none" x1="6" y1="203.6" x2="17.2" y2="216.2"/>
  </g>
</g> 
</svg>

perpetual-pencil.markdown

Perpetual Pencil

This is a little side idea I had based on a client project.

A Pen by Chris Gannon on CodePen.

License.

script.js

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);
  },
    elementsToDraw = [ '.lead', '.tipBot','.tipTop', '.pencilOutline', '.ridge'],
    pencil = select('.pencil'),
    drawing = select('.drawing')
  

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

TweenMax.set([pencil ], {
 rotation:-23,
 transformOrigin:'0% 100%'
})



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


function createDrawing(obj){
 
 var mainTl, tl, target, targetPath, targetBezier, drawDuration, nodeList = false, delay = (obj.delay) ? obj.delay : 0, repeat = (obj.repeat) ? obj.repeat : 0;
 
 mainTl = new TimelineMax({onUpdate:(obj.onUpdate) ? obj.onUpdate : null, repeat:repeat, repeatDelay:0, delay:delay});
 //decide if nodelist or array has been passed in
 if(typeof obj.list[0] == 'object'){
   nodeList = true;
 }
 TweenMax.set(obj.follower, {
  x:249.7,
  y:177.39
 })   
 
 
  for(var i = 0; i < obj.list.length; i++){
   
   tl = new TimelineMax();
   target = (nodeList) ? obj.list[i] : select(obj.list[i]);
   targetPath = target.getAttribute('d');
   targetBezier =  MorphSVGPlugin.pathDataToBezier(targetPath, {
       offsetX: obj.offsetX,
       offsetY: obj.offsetY
       })

  
   drawDuration = Math.round(target.getTotalLength())/150;

   
   tl.to(obj.follower, 0.5,{
    x:targetBezier[0].x,
    y:targetBezier[0].y,
    ease:Elastic.easeOut.config(0.61, 0.8)
   })
    .from(target, drawDuration, {
    drawSVG:'0% 0%',
    ease:Linear.easeNone
   })
   .to(obj.follower, drawDuration, {
    bezier: {
      type: "cubic",
      values:targetBezier,
      autoRotate: false
    },
    ease: Linear.easeNone
  },'-=' + drawDuration)

   

 mainTl.add(tl).timeScale(obj.timeScale);
   
  }
   mainTl.to(obj.follower, 0.5, {
    y:800,
    x:600,
    ease:Back.easeIn.config(0.82)
   })
    .from('.pencilFills', 0.6, {
    fillOpacity:0,
    ease:Sine.easeOut
   })
  .to('.pencilOutlines', 0.2, {
    alpha:0,
    ease:Sine.easeIn
   },'-=0.6')
 .to('.shadow', 0.2, {
    alpha:0,
    ease:Sine.easeIn
   },'-=0.6')
.set('.shadow',  {
    alpha:0.051
   },'-='+ mainTl.duration()) 
    
 
 return mainTl;
 
}

function updateShadow(){
 TweenMax.set('.shadow', {
  x:pencil._gsTransform.x,
  y:pencil._gsTransform.y
 })  
}

var drawingTl = createDrawing({list:elementsToDraw, follower:pencil, offsetX:-1, offsetY:-219, timeScale:1, repeat:-1, onUpdate:updateShadow});

drawingTl.to(drawing, 1.18, {
 rotation:-23,
 transformOrigin:'0% 100%',
 ease:Elastic.easeOut.config(0.9, 0.86)
},'-=0')
.to('.shadowEnd', 1.18, {
 skewX:0,
 alpha:0.05,
 ease:Elastic.easeOut.config(0.9, 0.86)
},'-=1.18')


TweenMax.set('.shadowEnd', {
   x:249.7,
  y:177.39,
 skewX:-43,
 transformOrigin:'0% 100%'
 
})


TweenMax.globalTimeScale(1.2)

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrubGSAPTimeline_debug.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>

style.css

body {
  background-color:#EAE8E6;
  overflow: hidden;
  text-align:center;
}

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


svg{

  width:100%;
  height:100%;
  visibility:hidden;
overflow: hidden;

 
  
}