<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 326.3 68.4" style="enable-background:new 0 0 326.3 68.4;" xml:space="preserve">

    <g>
      <g>
        <g>
          <path class="name" d="M125.3,11.1H91.4l0,0c0,0,0,0,0,0h-0.1l0,0c-8.4,0.1-9,9.2-9,9.2h9l0,0h12.5v10.8c0,0-0.4,30.1-1.6,34.5h1.6
                               h9.2h1.6c-1.2-4.3-1.6-34.5-1.6-34.5V20.3h12.3c0,0,9.2-0.6,9.2-9.2H125.3z"/>
          <path class="name" d="M254.8,13.1c-7.8-5.3-14.1,1.1-14.1,1.1L228.9,26L217,14.2c0,0-6.3-6.4-14.1-1.1l7.6,7.6l13.7,13.7
                               c-0.1,7.9-0.6,27.8-1.6,31.2h1.6h9.2h1.6c-1-3.5-1.4-23.3-1.6-31.2l13.7-13.7L254.8,13.1z"/>
          <path class="name" d="M324.7,31.1V11h-9.2l-20.2,33.4L274.8,11h-9.2v20.1c0,0-0.4,30.1-1.6,34.5h1.6h9.2h1.6
                               c-1.2-4.3-1.6-34.5-1.6-34.5v-2.4l15,24.8c0,0,2.6,4.2,5.4,4.2c2.8,0,5.6-4.6,5.6-4.6l14.8-24.5v2.4c0,0-0.4,30.1-1.6,34.5h1.6
                               h9.2h1.6C325.1,61.3,324.7,31.1,324.7,31.1z"/>
          <path class="name" d="M187.1,49.1c-2.6-2.6-5.1-4.6-7.3-6.1c4.8-1.4,11.8-5.2,11.8-15.5c0-16.8-16.4-16.3-16.4-16.3h-20.4h-1.4
                               h-7.8c0,0,0.5,8.1,7.8,9.1v0.1v10.8c0,0-0.4,30.1-1.6,34.5h1.6h9.2h1.6c-1.2-4.3-1.6-34.5-1.6-34.5V20.3h12.4c0.2,0,0.3,0,0.3,0
                               v-0.6v0.6c0,0,7.2-0.4,7.2,7.2c0,0,0.1,1-0.3,2.4c0,0.1-0.1,0.2-0.1,0.4c0,0.1,0,0.1-0.1,0.2c-0.2,0.6-0.5,1.1-0.8,1.5
                               c-1.1,1.8-3.2,3.8-7.1,5.3c-2.3,0.8-7.7,1.7-7.7,1.7c6,0.6,9.6,19.9,18.9,25.8c9.3,5.9,19-6.3,19-6.3
                               C199.7,59.8,195.8,57.9,187.1,49.1z"/>
        </g>
        <g>
          <g>
            <g>
              <path class="logo02" d="M58.3,10.1C44.8-3.4,22.9-3.4,9.5,10.1c-5,5-8.2,11.3-9.5,17.8c1.1,0.4,2,1,2.9,1.9
                                   c1.3,1.3,2.7,3.1,4.1,5.1c-0.4-2.3-0.6-4.6-0.6-6.6c0-4.6,3.8-8.4,8.4-8.4c4.6,0,8.4,3.8,8.4,8.4c0,1.8-0.3,4.1-0.7,6.5
                                   c1.3-1.9,2.8-3.7,4.2-5.1c3.3-3.3,8.6-3.3,11.9,0c3.3,3.3,3.3,8.6,0,11.9c-1.3,1.3-3.1,2.7-5.1,4.1c2.3-0.4,4.6-0.6,6.6-0.6
                                   c4.6,0,8.4,3.8,8.4,8.4c0,4.6-3.8,8.4-8.4,8.4c-1.8,0-4.1-0.3-6.5-0.7c1.9,1.3,3.7,2.8,5.1,4.2c0.9,0.8,1.5,1.8,1.9,2.9
                                   c6.5-1.3,12.7-4.4,17.8-9.5C71.7,45.4,71.7,23.6,58.3,10.1z"/>
            </g>
            <g>
              <path class="logo01" d="M22,62.8c4.5-4.5,4.5-11.9,0-16.5c-4.6-4.5-11.9-4.5-16.5,0c-1.1,1.1-1.9,2.3-2.4,3.6L3.1,50
                                   c1.6,3.3,3.7,6.1,6.4,8.8c2.8,2.8,5.5,4.8,8.8,6.4l0.3-0.1C19.8,64.6,21,63.8,22,62.8z"/>
            </g>
          </g>
        </g>
      </g>
    </g>

  </svg>
 .logo01{
      fill:#5CB531;
      stroke:#5CB531;
      stroke-dasharray: 2000;
      stroke-dashoffset: 0;
      stroke-width: 1;
      -webkit-animation: logo2 4s ease-in 0s;
      animation: logo2 4s ease-in 0s;
    }
    .logo02{
      fill:#5CB531;
      stroke:#5CB531;
        stroke-dasharray: 2000;
        stroke-dashoffset: 0;
        stroke-width: 1;
        -webkit-animation: logo 4s ease-in 0s;
        animation: logo 4s ease-in 0s;
      }

    .name{
      fill:#595757;
      stroke:#595757;
      stroke-dasharray: 2000;
      stroke-dashoffset: 0;
      stroke-width: 1;
      -webkit-animation: name 4s ease-in 0s;
      animation: name 4s ease-in 0s;
    }

    @keyframes logo {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#5CB531;
      }
    }
    @-webkit-keyframes logo {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#5CB531;
      }
    }

    @keyframes logo2 {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent
      }
      10% {
        stroke-dashoffset: 2000;
        fill:transparent
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#5CB531;
      }
    }
    @-webkit-keyframes logo2 {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent
      }
      10% {
        stroke-dashoffset: 2000;
        fill:transparent
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#5CB531;
      }
    }

    @keyframes name {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent
      }
      40% {
        stroke-dashoffset: 2000;
        fill:transparent
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#595757;
      }
    }
    @-webkit-keyframes name {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent
      }
      40% {
        stroke-dashoffset: 2000;
        fill:transparent
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#595757;
      }
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.