Velocity.js SVG animation

index.html

<script src="//use.typekit.net/hug1yrj.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

<div class="container">

  <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 49 52" enable-background="new 0 0 49 52" xml:space="preserve">

  <path class="path animate" fill="#FFFFFF" stroke="#36a7d8" stroke-width="1" stroke-miterlimit="10" d="M47,13.9c-0.1-0.2-0.3-0.5-0.5-0.8C44.7,10.6,26.9,0.7,24.7,1c0,0-0.1,0-0.2,0c-0.1,0-0.3,0-0.3,0
      C21.9,0.8,5.9,9.7,2.8,12.7c-0.5,0.5-0.8,1-0.9,1.4C0.8,17.3,0.7,33,1.7,37.3c0.2,0.8,0.7,1.7,1.5,2.3c2,1.7,7,4.7,11.6,7.2
      c3.7,2,7.2,3.7,8.8,4.1c0.6,0.1,1.2,0.1,1.8,0c1.4-0.3,4.3-1.7,7.5-3.3C38,44.9,44,41.3,46,39.5c0.6-0.6,1.1-1.3,1.3-2.1
      C48.3,33.1,48.2,16.3,47,13.9z"/>

  <path fill="#36a7d8" class="logo" d="M33.2,35.6c0,0-3.3,2.1-8.1,2.1c-6.5,0-11.7-5.1-11.7-11.6c0-6.5,5.2-11.7,11.7-11.7c2.7,0,5.7,1.1,7.9,3.1
    c0.3,0.2,0.3,0.6,0.1,0.9L30.6,21c-0.3,0.2-0.6,0.2-0.9,0c-1.2-1.1-2.7-1.6-4.3-1.6c-3.5,0-6.4,3-6.4,6.6c0,3.5,2.9,6.5,6.4,6.5
    c0.9,0,1.9-0.1,2.9-0.5v-1.9h-2c-0.4,0-0.6-0.3-0.6-0.6v-3.2c0-0.4,0.3-0.6,0.6-0.6h6.5c0.3,0,0.6,0.3,0.6,0.6l0,8.7
    C33.5,35.2,33.4,35.5,33.2,35.6z"/>
  </svg>

  <p class="button">Run Again</p>
</div>

script.js

window.onload = function() {
 
  // Run the animation on click
  $('.button').on('click', function(){
    animate();
  });

  function animate() {
    $('.logo')
      .velocity({ opacity: 0 }, 0)
      .velocity({ opacity: 1 }, {duration: 1000, delay: 10});
    
    $('.path')
      .velocity({ 'stroke-dashoffset': 400 }, 0)
      .velocity({ 'stroke-dashoffset': 0 }, { duration: 650, delay: 10 });
  }
  
  animate();
};

style.scss

@import "compass/css3";
.container {
  margin: 60px auto 0 auto;
  text-align: center;
  width: 180px;
}

#logo {
  display: inline-block;
  width: 90px;
}

.path {
  stroke-dasharray: 400;
}

p.button {
  color: #36a7d8;
  cursor: pointer;
  border: 2px solid #36a7d8;
  display: inline-block;
  font-family: "brandon-grotesque", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  margin-top: 30px;
  padding: 6px 10px;
  text-transform: uppercase;
  
  @include transition(all .15s ease-in-out);
  
  &:hover {
    background: #36a7d8;
    border-color: #36a7d8;
    color: #fff;
  }
}

Velocity.js-SVG-animation.markdown

Velocity.js SVG animation

Small animation exploration of my logo for my website.

A Pen by Gaston on CodePen.

License.