<div class="wrap">
<svg version="1.1" id="group" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 440.98 146.06" style="enable-background:new 0 0 440.98 146.06;" xml:space="preserve">
<path class="item01" d="M16,142.06V121.7c2.93,0,5.43-0.16,7.49-0.49c2.06-0.33,3.69-0.95,4.89-1.87c1.19-0.92,2.06-2.28,2.61-4.07
  c0.54-1.79,0.81-4.1,0.81-6.92V6.7h29.16v102.95c0,7.17-0.9,13.17-2.69,18c-1.79,4.83-4.91,8.44-9.37,10.83
  c-4.45,2.39-10.7,3.58-18.73,3.58H16z"/>
<path class="item02" d="M74.15,138.64L99.07,6.7h33.23l24.6,131.94h-26.88l-4.4-27.85h-19.38l-4.56,27.85H74.15z M108.85,93.35h14.01
  l-7-51.47L108.85,93.35z"/>
<path class="item03" d="M170.26,138.64V6.7h44.31c7.93,0,14.44,1.49,19.55,4.48c5.1,2.99,8.9,7.33,11.4,13.03
  c2.5,5.7,3.75,12.62,3.75,20.77c0,10.21-1.69,18-5.05,23.37c-3.37,5.38-7.93,9.1-13.68,11.16c-5.76,2.06-12.22,3.09-19.38,3.09
  h-11.73v56.03H170.26z M199.41,62.24h9.77c3.58,0,6.3-0.65,8.14-1.95c1.84-1.3,3.07-3.26,3.66-5.86c0.6-2.61,0.9-5.92,0.9-9.94
  c0-3.36-0.24-6.32-0.73-8.88c-0.49-2.55-1.66-4.59-3.5-6.11c-1.85-1.52-4.72-2.28-8.63-2.28h-9.61V62.24z"/>
<path class="item04" d="M256.91,138.64L281.84,6.7h33.23l24.6,131.94h-26.88l-4.4-27.85H289l-4.56,27.85H256.91z M291.61,93.35h14.01
  l-7-51.47L291.61,93.35z"/>
<path class="item05" d="M353.02,138.64V6.7h20.52l27.04,63.53V6.7h24.11v131.94h-19.71l-27.04-68.41v68.41H353.02z"/>
</svg>
</div>
body{
  width: 100%;
  height: 100vh;
  margin: 0;
  background: #fff;
}

@keyframes japan {
   0% {
   stroke-dashoffset: 2572;
   fill: transparent;
   opacity: 1;
  }
   40% {
   stroke-dashoffset: 0;
   fill: transparent;
   opacity: 1;
  }
   50% {
   stroke-dashoffset: 0;
   fill: #357ECF;
   opacity: 1;
  }
   80% {
   stroke-dashoffset: 0;
   fill: #357ECF;
   opacity: 1;
  }
   95% {
   stroke-dashoffset: 0;
   fill: #357ECF;
   opacity: 0;
  }
   100% {
   stroke-dashoffset: 0;
   fill: #357ECF;
   opacity: 0;
  }
}

.wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 100%;
  margin: 0 auto;
}

#group{
  display: block;
  width: 100%;
}

.item01,.item02,.item03,.item04,.item05{
  fill: transparent;
  stroke: #357ECF;
  stroke-dasharray: 2572;
  stroke-dashoffset: 0;
  stroke-width: 1;
  opacity: 1;
}

.item01{
  animation: japan 5s ease-in 0s infinite;
}

.item02{
  animation: japan 5s ease-in 0.2s infinite;
}

.item03{
  animation: japan 5s ease-in 0.4s infinite;
}

.item04{
  animation: japan 5s ease-in 0.6s infinite;
}

.item05{
  animation: japan 5s ease-in 0.8s infinite;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.