Basedrop Animated Logo

index.html

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 420 80" enable-background="new 0 0 420 80" xml:space="preserve">
    <g id="baselogo">
        <path fill="#345984" d="M22.3,16.1c10,0,15.6,5,15.6,12.5c0,4.2-2.1,7-5.3,8.8C40.4,39.5,44,44.6,44,50.9c0,8.5-7.1,15-16.7,15H11 		l-0.4-0.4V16.4l0.4-0.4H22.3z M16.1,36.1h6.2c5.8,0,9.3-2.6,9.3-7.5c0-4.3-2.8-7.1-9.3-7.1h-6.2V36.1z M16.1,60.4h11.1 		c6.4,0,10.5-3.8,10.5-9.5c0-5.4-4.1-9.3-10.5-9.3H16.1V60.4z" />
        <path fill="#345984" d="M79.3,16.1l0.4,0.4l19.9,49.1l-0.4,0.4h-5.3l-0.4-0.4l-5.3-13H65.4l-5.3,13l-0.4,0.4h-5.3l-0.4-0.4 		l19.8-49.1l0.4-0.4H79.3z M67.6,47H86l-9.3-23.4L67.6,47z" />
        <path fill="#345984" d="M132.6,25.4c-2.2-2.9-4.3-4.6-7.7-4.6c-3.6,0-6.5,2.8-6.5,6.6c0,8.5,22.8,8.2,22.8,24 		c0,8.6-7,15.6-15.6,15.6c-7.1,0-12.5-3.9-15-10.3l4-3.1h0.7c2.1,5.1,5.6,7.7,10.3,7.7c5.3,0,9.3-4.2,9.3-9.8 		c0-10.8-22.9-10.3-22.9-24c0-6.8,5.6-12.4,12.8-12.4c5.7,0,10,3.2,12.5,7.5l-4.1,2.9H132.6z" />
        <path fill="#345984" d="M186.8,16.1l0.4,0.4v4.8l-0.4,0.4h-23.1v14.2h17.4l0.4,0.4v4.8l-0.4,0.4h-17.4v19.2h25.3l0.4,0.4v4.8 		l-0.4,0.4h-30.4l-0.4-0.4V16.4l0.4-0.4H186.8z" />
        <path fill="#345984" d="M220.9,16.1c15.3,0,26.3,11,26.3,24.9s-11,24.9-26.3,24.9h-15.1l-0.4-0.4V16.4l0.4-0.4H220.9z M210.9,60.4 		h10c11.6,0,20-8.5,20-19.4c0-10.9-8.4-19.4-20-19.4h-10V60.4z" />
        <path fill="#345984" d="M277.6,16.1c9.8,0,16,5.6,16,13.8c0,6.3-4.1,10.9-9.7,12.8l16.9,22.9l-0.4,0.4h-6.4l-0.4-0.4l-16.4-21.8 		h-7.6v21.8l-0.4,0.4h-4.8l-0.4-0.4V16.4l0.4-0.4H277.6z M269.7,38.2h7.5c5.7,0,10-2.8,10-8.3c0-5.2-3.5-8.3-9.7-8.3h-7.9V38.2z" />
        <path fill="#345984" d="M393.5,16.1c10.5,0,17.3,6.3,17.3,14.9s-6.8,15-17.3,15H385v19.7l-0.4,0.4h-4.8l-0.4-0.4V16.4l0.3-0.4 		H393.5z M385,40.4h8.5c6.8,0,11-3.7,11-9.4c0-5.6-4.2-9.4-11-9.4H385V40.4z" />
        <path fill="#345984" d="M362.3,41c0,14.3-11.8,26-26.3,26c-14.5,0-26.4-11.7-26.4-26c0-14.3,11.8-26,26.4-26 		C350.5,15,362.3,26.7,362.3,41z M315.8,41c0,11.2,9,20.2,20.1,20.2c11,0,20-9,20-20.2s-9-20.2-20-20.2 		C324.9,20.8,315.8,29.8,315.8,41z" />
    </g>
    <g id="upload">
        <path class="path" fill="none" stroke="#24BFE2" stroke-width="22.5" stroke-miterlimit="10" d="M336.6,19.5c-11.8,0.1-21.5,9.5-21.5,21.1 c0,11.7,9.7,21.1,21.5,21.1S358,52.3,358,40.6S348.4,19.5,336.6,19.5" />
    </g>
</svg>

style.scss

$button-color: #24bfe2;
$length: 150;

*{
  box-sizing: border-box;
}

svg{
  display: block;
  width: 50%;
  max-width: 400px;
  margin: 200px auto;
  padding: 2em;
  border-radius: 1em;
}

.path {
  stroke-dasharray: $length;
  stroke-dashoffset: $length;
  animation: dash 3s linear infinite;
  transition-timing-function: ease-in-out;
}

@keyframes dash {
    0%   {stroke-dashoffset: $length*-1; opacity: 1;}
    50%  {opacity: .9;}
    65%  {opacity: .5;}
    75%  {opacity: .4;}
    90% {stroke-dashoffset: 0; opacity: .2;}
    100% {stroke-dashoffset: 0; opacity: 0;}
}