90tech Welcome

90tech Welcome.markdown

90tech Welcome

Animating the 90Tech's logo

A Pen by Renaud ROHLINGER on CodePen.

License.

index.html

<svg xmlns="http://www.w3.org/2000/svg" width="102" height="132" version="1.1" x="0" y="0" viewBox="0 0 612 792" xml:space="preserve">
  <style type="text/css">


  </style>
  <path class="st0" d="M294.4 421c-0.4 0.9-1.7 1.1-2.3 0.3 -8.1-10.1-14.5-21.3-21.5-32.1 -14-21.7-27.8-43.5-42-65.1 -7.9-12-18.1-21.2-32-26 -31.7-10.9-67.6 7-77.8 39.4 -8.1 25.7-5 49.7 14.4 69.5 25 25.5 65.9 23.3 90.2-4.1 4.3-4.9 8-10.2 11-16 2.4-4.5 3.8-4.6 6.4-0.4 10.5 17 21.3 33.8 32.9 50.1 5.1 7.1 4.3 14.3-0.5 21.4 -15.5 23.3-30.9 46.6-46.3 70 -17 25.9-34 51.8-50.8 77.8 -2.7 4.2-5.8 6.2-11 6.1 -19.9-0.3-39.9-0.2-59.8-0.3 0 0-0.1 0-0.1 0 -3.1-0.3-7 0.4-8.8-2.6 -1.8-3 1.6-5.1 3-7.3 23.9-36.7 47.8-73.4 71.8-110.1 0.5-0.8 1.3-1.6 1.8-2.6 0.4-0.9-0.2-2-1.2-2 -10.5 0.1-20.9 0.5-31.2-1.7 -44.2-9.4-72.3-37-86.5-78.8 -19.6-57.8 1.1-121.2 51.5-155.5 42.2-28.6 86.7-30.2 131.6-5.2 6.5 3.6 12 8.6 16.4 14.4 17.8 23.8 34.6 48.3 49.9 73.7 0.1 0.2 0.2 0.4 0.2 0.6 0.1 1.4 0.1 2.8 0.3 4.1C308.9 367.3 305.5 394.6 294.4 421z"/>
  <path class="st1" d="M293.5 423.1c11.8-27 15.5-55 10.7-84.1 0 0 0 0 0-0.1 -0.2-1.4 1.6-2.1 2.4-1 9.6 12.2 17.9 25.4 26.6 38.2 7.2 10.6 13.1 22.1 22.5 31.1 19.6 18.8 42.6 23.6 67.8 14.9 24.7-8.5 38.8-27 42.6-52.7 4.8-33.2-14.2-61.4-47.6-71.9 -28.5-8.9-61.2 5.6-75.4 33.3 -0.4 0.7-0.7 1.5-1.1 2.2 -2.3 4-3.7 4.1-6.4 0.3 -6.4-9.4-12.6-18.8-18.9-28.2 -3.5-5.2-7.2-10.4-10.8-15.6 -5.2-7.6-5.2-8.8 0.8-15.5 27.5-30.8 61.9-45.9 103.3-44.3 62.3 2.5 113.6 52 118.3 114.2 3 40.1-8.2 75.4-36.1 104.8 -20.1 21.1-45.1 33-73.9 36.2 -54.1 6-95.1-15.9-124.4-61C293.7 423.7 293.6 423.4 293.5 423.1z"/>
  <path class="st3" d="M459.3 573.5c0-10.8 0.2-21.7-0.1-32.5 -0.1-4 1.2-5.1 4.9-5.5 5.5-0.6 10.9-0.5 16.4 0.2 2.5 0.3 3.4 1.3 3.3 3.8 -0.2 6 0.1 12-0.1 18 -0.1 4.4 1.2 5.5 9.9 3.2 0.2-0.1 0.4-0.1 0.6 0 8.4 1.7 10.8 2 10.7-2.5 -0.2-6 0.1-12-0.1-18 -0.1-2.8 0.5-4.1 3.7-4.5 6-0.8 11.9-0.7 17.9 0.1 2.5 0.4 3.3 1.4 3.2 3.9 -0.1 22.5-0.1 45 0 67.4 0 2.5-0.6 3.5-3.2 3.9 -6.2 0.7-12.2 0.8-18.4 0.1 -2.7-0.3-3.2-1.5-3.1-3.9 0.1-6.8-0.1-13.7 0.1-20.5 0.1-4-1.7-4.2-10.2-2.3 -0.2 0-0.4 0-0.6 0 -8.4-1.9-10.4-1.9-10.3 2.2 0.1 6.7-0.1 13.3 0.1 20 0.1 3.3-1.1 4.2-4.2 4.5 -5.5 0.6-10.9 0.5-16.4 0 -3.4-0.3-4-1.6-4-4.7C459.4 595.5 459.3 584.5 459.3 573.5z"/>
  <path class="st3" d="M357.3 581.5c-6 0-12 0-18-0.2 -4.3-0.2-3.9 1.4-2.3 4.2 2.6 4.5 6.9 6.1 11.7 6.4 6.4 0.4 12.7-0.5 18.6-2.8 2.9-1.1 4-0.4 5.1 2.3 6.4 14.7 5.3 16.9-10.1 19.9 -8.6 1.6-17.2 1.7-25.8-0.4 -11.8-2.9-19.9-9.9-23.5-21.6 -3.8-12.4-3.3-24.7 2.5-36.5 6.7-13.5 23-20.9 39-17.7 14.6 2.9 24.4 14.9 25.2 30.8 0.8 15.3 0.8 15.4-14.1 15.4C363 581.5 360.1 581.5 357.3 581.5zM351.4 564.4c0.2 0 0.3 0 0.5 0 6.1 1.3 6.5-0.4 5.4-3.7 -1.6-4.8-5.4-7.7-10.4-7.7 -5.1 0-9.3 3-11 7.7 -1 2.7-1.2 4.5 2.7 4.1C342.8 564.4 347.1 565.2 351.4 564.4z"/>
  <path class="st3" d="M295 570.2c0 11.8-0.2 23.6 0.1 35.5 0.1 4-1.4 5.1-5 5.4 -5.3 0.4-10.6 0.4-15.9 0 -3.5-0.3-4.7-1.5-4.7-5.2 0.2-23.6 0-47.3 0.2-70.9 0-4.3-1.1-5.4-5.2-5.1 -5.1 0.4-10.3 0-15.5 0.1 -2.6 0.1-3.9-0.5-2.6-3.3 3-6.5 7.3-12.3 11.5-18 1.1-1.4 2.7-1.1 4.1-1.1 17.8 0 35.6 0.1 53.4-0.1 2.8 0 3.8 0.9 4.1 3.5 0.7 5.3 0.6 10.6-0.1 15.9 -0.3 2.5-1.4 3.2-3.9 3.1 -5.7-0.2-11.3 0.2-17-0.1 -3.2-0.2-3.8 1-3.8 4C295 545.9 295 558.1 295 570.2z"/>
  <path class="st3" d="M427.7 534.7c5.2-0.2 11.1 0.9 17.1 3 2.8 1 3.7 2.4 3.3 5.1 -0.2 1.5-0.3 3-0.6 4.4 -2.3 10.1-2.3 10.1-12.1 8.7 -7-0.9-14.5-0.6-20.2 3.8 -0.2 0.2-0.4 0.4-0.5 0.7 -2.4 8.7-2.9 20.3 1.7 28.5 0.2 0.3 0.5 0.5 0.8 0.6 7.8 2.5 16.1 3.2 23.5 0.2 2.4-1 3.5-0.4 4.6 1.9 7.2 13.8 4.6 18.8-10.7 20.4 -11 1.2-21.8 0.8-31.3-5.7 -13.6-9.3-16.4-23.4-14.8-38.5C390.9 546 404.6 534.6 427.7 534.7z"/>

</svg>

style.css

svg{
  display:block;
  margin:0 auto;
}	

.st0{fill:none; stroke:#000000;stroke-width:6;}
.st1{fill:none;stroke:#03A9F4;stroke-width:6;}
.st3{fill:#000000; opacity:1;}

.st0 {
  stroke-dasharray: 1600;
  stroke-dashoffset: 0;
  animation: dash 5s infinite;
  animation-direction: forward;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.st1 {
  stroke-dasharray: 1600;
  stroke-dashoffset: 375;
  animation: dash1 5s infinite;
  animation-direction: forward;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.st3{
  animation: logo 5s infinite;
  animation-direction: forward;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
@keyframes logo {
  0% {
    opacity:0;
  }
   50% {
    opacity:0;
  }
  100% {
    opacity:1;
  } 
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1600;
  }
  50%{
    stroke-dashoffset: 0;
  }
  80%{
  }
  100% {
    fill:rgba(0, 0, 0, 1);
  } 
}

@keyframes dash1 {
  0% {
    stroke-dashoffset: 1600;
  }
  50%{
    stroke-dashoffset: 0;
  }
  80%{
  }
  100% {
    fill:rgba(3, 169, 244, 1);
  } 
}