Anim stroke logo 3

by Arnaud

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">
  
  <path class="path path1" stroke="#ffffff" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="30" stroke-dasharray="1000" stroke-dashoffset="1" fill="none"  d="M0.6,0L55,0C67.3,0 76.6,0.9 83,2.8C91.6,5.3 99,9.9 105.2,16.4C111.4,22.9 116,30.9 119.3,40.3C122.5,49.7 124.1,61.3 124.1,75.1C124.1,87.2 122.6,97.7 119.6,106.4C115.9,117.1 110.7,125.8 103.8,132.4C98.6,137.4 91.7,141.3 82.9,144.2C76.3,146.3 67.6,147.3 56.6,147.3L0.6,147.3L0.6,0ZM30.4,24.9L30.4,122.4L52.6,122.4C60.9,122.4 66.9,121.9 70.6,121C75.4,119.8 79.4,117.8 82.6,114.9C85.8,112 88.4,107.3 90.4,100.7C92.4,94.1 93.4,85.1 93.4,73.7C93.4,62.3 92.4,53.6 90.4,47.5C88.4,41.4 85.6,36.7 82,33.2C78.4,29.8 73.8,27.5 68.2,26.3C64,25.4 55.9,24.9 43.8,24.9L30.4,24.9Z"/>

  
   <path class="path path2" stroke="#ffffff" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1000" stroke-dashoffset="1" fill="none" d="M126.4,26.1L126.4,0L154.6,0L154.6,26.1L126.4,26.1ZM126.4,147.3L126.4,40.6L154.6,40.6L154.6,147.3L126.4,147.3Z" />

  <path class="path path3" stroke="#ffffff" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1000" stroke-dashoffset="1" fill="none" d="M159.8,154.3L192,158.2C192.5,162 193.8,164.5 195.7,165.9C198.4,167.9 202.6,168.9 208.4,168.9C215.8,168.9 221.3,167.8 225,165.6C227.5,164.1 229.4,161.8 230.6,158.5C231.5,156.2 231.9,151.8 231.9,145.5L231.9,130C223.5,141.5 212.8,147.3 200,147.3C185.7,147.3 174.3,141.2 165.9,129.1C159.3,119.5 156.1,107.6 156.1,93.3C156.1,75.4 160.4,61.8 169,52.3C177.6,42.9 188.3,38.1 201.1,38.1C214.3,38.1 225.2,43.9 233.7,55.5L233.7,40.5L260.1,40.5L260.1,136.2C260.1,148.8 259.1,158.2 257,164.4C254.9,170.6 252,175.5 248.3,179.1C244.5,182.6 239.5,185.4 233.3,187.4C227,189.4 219.1,190.4 209.5,190.4C191.4,190.4 178.6,187.3 171,181.1C163.4,174.9 159.6,167.1...

CSS

.path {
  animation: animStrokes 2s  ease;
  animation-fill-mode: forwards; 
    animation-iteration-count: 1;
}
 	.st0{
    animation: animFond 2s ease;
    fill:transparent;
  animation-fill-mode: forwards; 
    animation-iteration-count: 1;
  }
.path1,
.st1{
  animation-delay:0s;
}
.path2,
.st2{
  animation-delay:0.2s;
}
.path3,
.st3{
  animation-delay:0.4s;
}
.path4,
.st4{
  animation-delay:0.6s;
}
.path5,
.st5{
  animation-delay:0.8s;
}
.path6,
.st6{
  animation-delay:1s;
}
.path7,
.st7{
  animation-delay:1.2s;
}
.path8,
.st8{
  animation-delay:1.4s;
}
.path9,
.st9{
  animation-delay:1.6s;
}


 @keyframes animStrokes {
  0% {
    stroke-dashoffset: 1000;
    stroke-width:1;
    stroke:#7a99c1;
  }
 
  50%{
    stroke:#ccc
  }
 100%{
    stroke:#fff
  }

}


 @keyframes animFond {
  0% {
    fill:transparent;
  }
  25%{
    fill:#c0ccdb
  }
 100%{
    fill:#333
  }

}