SVG Animation Demo

WIP

by yshrkn

HTML

<div class="view">

  <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 100" style="enable-background:new 0 0 300 100;" xml:space="preserve">
            <g>
                <path class="path" d="M55.8,23.1H16.4v20.7h33.8v12.7H16.4v31.8H1.4v-78h54.3V23.1z" />
                <path class="path" d="M103,9c5.6,0,10.8,1,15.3,2.9c4.6,1.9,8.5,4.7,11.7,8.2c3.2,3.5,5.8,7.8,7.5,12.7s2.7,10.5,2.7,16.5c0,6-0.9,11.5-2.6,16.4
               c-1.7,4.9-4.2,9.2-7.4,12.7c-3.2,3.6-7.1,6.3-11.7,8.2s-9.7,2.9-15.5,2.9c-5.7,0-10.8-1-15.5-2.9c-4.6-1.9-8.6-4.7-11.8-8.2
               c-3.3-3.5-5.8-7.8-7.5-12.7s-2.6-10.4-2.6-16.4c0-6.1,0.9-11.6,2.7-16.5s4.3-9.2,7.5-12.7c3.3-3.5,7.2-6.2,11.8-8.2S97.3,9,103,9z
                M102.9,76.9c3.5,0,6.6-0.7,9.3-2c2.7-1.4,5-3.3,6.9-5.7c1.9-2.4,3.4-5.3,4.4-8.7s1.5-7.1,1.5-11.1c0-4.1-0.5-7.8-1.5-11.2
               s-2.4-6.3-4.3-8.7c-1.9-2.4-4.2-4.3-6.9-5.7c-2.7-1.4-5.8-2-9.2-2s-6.6,0.7-9.3,2s-5.1,3.2-7,5.7c-1.9,2.4-3.4,5.3-4.4,8.7
               c-1,3.4-1.5,7.1-1.5,11.2c0,4,0.5,7.7,1.5,11.1c1,3.4,2.5,6.3,4.4,8.7c1.9,2.4,4.2,4.3,6.9,5.7C96.4,76.3,99.5,76.9,102.9,76.9z"
                />
                <path class="path" d="M220.2,88.3h-16l-6.9-19.4c-0.6-1.7-1.4-3.2-2.3-4.7c-0.9-1.4-2-2.6-3.3-3.6c-1.2-1-2.6-1.8-4.1-2.3
               c-1.5-0.5-3.2-0.8-5-0.8h-14.5v30.8h-14.9v-78h34.6c2.9,0,5.6,0.1,8.1,0.4c2.5,0.2,4.8,0.7,6.8,1.4c2.1,0.7,3.9,1.6,5.6,2.7
               c1.7,1.2,3.1,2.7,4.3,4.5c2.5,3.7,3.7,8.1,3.7,13.3c0,5.5-1.5,9.9-4.4,13.3c-2.9,3.4-7,5.7-12.3,6.9V53c3,1,5.5,2.7,7.5,5.2
               s3.7,5.6,5.3,9.6L220.2,88.3z M168.2,45.2h18.2c2.7,0,4.9-0.2,6.8-0.7c1.9-0.4,3.4-1.1,4.6-2.1c1.2-0.9,2.1-2.2,2.7-3.7
               c0.6-1.5,0.9-3.3,0.9-5.4c0-3.9-1.1-6.7-3.4-8.6c-2.3-1.8-5.7-2.8-10.3-2.8h-19.4V45.2z" />
                <path class="path" d="M297,88.3h-17.8l-24-36.8l-8.8,8.5v28.3h-14.9v-78h14.9V46l31.2-35.7h18.1L266.6,43L297,88.3z" />
           ...

SCSS

.view {
  height:0;
  padding-top:37.5%;
  position: relative;
}

svg {
  height: 100%;
  display:block;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  //animation: svgBg 3s ease-in-out 0s forwards;
}

.path {
  stroke: #092951;
  fill: transparent;
  stroke-width: 1;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: dash 3s ease-in-out 0s forwards;
}

@keyframes svgBg {
    0% {
      background: #55f;
    }
    100% {
      background: #fff;
    }
}

@keyframes dash {
    0% {
      stroke-dashoffset: 3000;
    }
    50% {
      background: transparent;
      stroke-width: 0;
      stroke-dashoffset: 0;
    }
    100% {
      fill: #55f;
    }
}