drsvg logo

by Alexandru Gatea

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
  <path class="svg-object animate" d="M94.4,101.5c-32,0-58.2,19.9-58.2,59.9c0,39.5,26.2,59.6,58.2,59.6c33.4,0,58.2-24.5,58.2-59.9
	S127.2,101.5,94.4,101.5z" />
  <path class="svg-object animate big-shape" d="M274.3,0h-108l0.3,0.4V150h0v43.3v39.3h-13.8v-31.4c-11.8,21.6-35.1,33.7-59.3,33.7c-23.4,0-43.9-9.1-56.8-26.2
	l-1.3-1.9c-8.2-11.7-13-27-13-45.4c0-4,0.2-7.8,0.7-11.4H23c4.8-39.8,34.4-62,70.8-62c24.5,0,47.5,10.4,59,33.4V0H25.7
	C11.5,0,0,11.5,0,25.7V150v124.3C0,288.5,11.5,300,25.7,300h140.9h0.1H186v-67.3v-0.2V150V90.3h13.2l0.6,25.3
	c8.9-19.3,29.1-26.8,47.2-26.8c10.8-0.2,21.4,2.7,30.5,8.3l-6.3,11.5c-7.3-4.4-15.7-6.7-24.2-6.6c-26.1,0.1-47.1,21.4-47,47.5v0.4
	l0.1,150.1h74.2c14.2,0,25.7-11.6,25.7-25.8V149.9V25.7C300,11.5,288.5,0,274.3,0z" />
</svg>

CSS

.svg-object {
  fill: #038d98;
  stroke: #038d98;
  stroke-miterlimit: 5;
  stroke-width: 2;
}

svg {
  max-width: 200px;
  margin-top: 100px;
  margin-left: 200px;
}

.animate {
  fill-opacity: 0;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration: 1;
  animation-name: DrawLine, FadeStroke, FillIn;
  animation-duration: 4s, 1s, 2s;
  animation-delay: 0s, 3s, 3s;
  stroke-dashArray: 1500;
  stroke-dashoffset: 1500;
}

.big-shape {
  stroke-dashArray: 3500;
  stroke-dashoffset: 3500
}

@keyframes DrawLine {
  to {
    stroke-dashOffset: 0;
  }
}

@keyframes FadeStroke {
  to {
    stroke-opacity: 0;
  }
}

@keyframes FillIn {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

JavaScript

jQuery(document).ready(function($) {
  setInterval(function() {
    removeAnimation();
    restartAnimation()
  }, 8000);

  function removeAnimation() {
    setTimeout(function() {
      $('.svg-object').removeClass('animate');
    }, 5000);
  }

  function restartAnimation() {
    setTimeout(function() {
      $('.svg-object').addClass('animate');
    }, 5500);
  }
});