<div class="svg-wrapper">
  <svg height="60" width="520" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" height="60" width="520" />
    <div class="text">Wolfsrudel Design</div>
  </svg>
</div>

html, body {
  background: rgb(20,20,20);
  text-align: center;
  height: 100%;
  overflow: hidden;
}
.svg-wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
	margin: 0 auto;
  width: 520px;  
  text-align: center;
}
.shape {
  stroke-dasharray: 0 580;
  stroke-dashoffset: 580;
  stroke-width: 4px;
  fill: transparent;
  stroke: #fefefe;
  border-bottom: 5px solid black;
  transition: stroke-width 2.7s, stroke-dashoffset 2.7s, stroke-dasharray 1.3s;
  transition-delay: 0s;
  fill: rgb(20,20,20);  
}
.text {
  font-family: 'David Libre';
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 8px;
  color: #fff;
  top: -48px;
  position: relative;
  text-align: center;
  height: 60px;
  width: 520px;
  font-variant: small-caps;
}
.shape-border {
  stroke-width: 4px;
  stroke-dashoffset: 0;
  stroke-dasharray: 480 100;
}

// For more check out zachsaucier.com
// Fork of https://codepen.io/seanmccaffery/pen/xBpbG
$(function() {
  $('.shape').addClass("shape-border");
  $('.svg-wrapper').click(function() {
    $('.shape').toggleClass('shape-border');
  });
});