Anim stroke logo 3 clair

by Arnaud

HTML

<svg width="100%" height="100%" viewBox="0 0 519 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"  stroke="black" stroke-width="4"    >
    <g transform="matrix(1,0,0,1,-365.76,-297.589)">
        <path class="path" d="M395.403,300.012C395.403,300.012 385.752,341.202 380.35,367.558C376.428,386.694 368.01,448.721 368.01,448.721C368.01,448.721 389.398,384.342 408.588,351.981C420.139,332.502 436.665,296.166 449.822,300.141C459.88,303.179 451.801,330.212 445.743,360C439.435,391.016 439.183,401.921 438.893,412.243C438.543,424.693 445.606,441.725 461.943,427.993C471.643,419.84 481.884,410.445 489.093,401.443C495.284,393.713 508.057,375.633 508.057,375.633C508.057,375.633 497.048,388.317 498.648,403.517C500.248,418.717 504.483,417.831 508.539,417.934C513.575,418.063 520.408,408.317 522.929,400.279C524.968,393.779 525.701,384.608 523.325,380.432C521.677,377.535 518.193,372.686 519.618,371.312C521.818,369.192 520.645,381.333 530.893,383.243C538.536,384.667 543.029,386.157 552.222,382.257C552.313,382.504 551.544,389.767 551.544,389.767C551.544,389.767 561.092,386.017 565.841,381.238C570.744,376.303 573.5,369.503 570.736,367.434C567.545,365.048 563.466,366.026 558.345,371.838C554.14,376.61 549.369,391.281 551.075,398.974C553.387,409.401 564.182,411.057 572.579,406.346C581.788,401.18 588.606,392.854 592.547,388.906C597.216,384.228 599.858,374.029 599.858,374.029C599.858,374.029 594.492,391.191 593.878,397.95C593.264,404.708 592.752,412.634 592.752,412.634C592.752,412.634 602.714,391.155 609.389,382.574C616.018,374.051 620.511,364.238 625.746,366.147C630.98,368.056 628.502,372.972 626.85,383.959C625.198,394.946 624.794,400.141 627.787,401.421C630.779,402.7 638.141,391.55 641.625,385.545C645.399,379.041 654.259,370.199 654.829,370.898C655.981,372.313 657.434,377.088 654.902,385.391C652.159,394.384 651.372,401.09 656.466,402.594C660.069,403.658 664.918,402.007...

CSS

body{
  background-color:#1d1d1d;
}



.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s linear  infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 800  ;
  }
  to {
    stroke-dashoffset: 0;
  }
}


 	.st0{
    animation: animStrokes 4s 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: 10000;
    stroke-width:4;
    stroke:#7a99c1;
  }
 
  50%{
    stroke:#ccc
  }
 100%{
    stroke:transparent
  }

}


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

}