.anim{
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: -2s;
  }
  
  @keyframes example {
    75%  { bottom:200px; left:0px;}
    100% {bottom:0px; left:0px;}
  }

  /* body {
    margin:0;
      background:#000;
      text-align:center;
  } */
  
  #svgwrapper {
    display:inline-block;
    width:400px;
    height:200px;
    stroke: white;
    fill: none;
    position: relative;
  }
  
  .logo-path {
      display: block;
      margin: 0 auto;
      position: absolute;
      top: calc(20% + 20px);
  }
  
  .logo-path {
      stroke-dasharray: 2600;
      stroke-dashoffset: 2600;
  }
  
  .underline {
      stroke-width: 20;
      animation: letter-animation 5s linear forwards;
      animation-delay: 5.1s;
  }
  
  .i-2 { /* Mar(i)na */
      stroke-width: 12;
      animation: letter-animation 15s linear forwards;
      animation-delay: 4.8s;
  }
  
  .aa-2 { /* Marin(a) */
      stroke-width: 30;
      animation: letter-animation 10s linear forwards;
      animation-delay: 4.25s;
  }
  
  .aa-1 { /* Marin(a) */
      stroke-width: 10;
      animation: letter-animation 8s linear forwards;
      animation-delay: 4s;
  }
  
  .n-2 { /* Mari(n)a */
      stroke-width: 15;
      animation: letter-animation 10s linear forwards;
      animation-delay: 3.5s;
  }
  
  .n-1 { /* Mari(n)a */
      stroke-width: 10;
      animation: letter-animation 8s linear forwards;
      animation-delay: 3.3s;
  }
  
  .i-1 { /* Mar(i)na */
      stroke-width: 9;
      animation: letter-animation 8s linear forwards;
      animation-delay: 3s;
  }
  
  .r-2 { /* Ma(r)ina */
      stroke-width: 12;
      animation: letter-animation 8s linear forwards;
      animation-delay: 2.7s;
  }
  
  .r-1 { /* Ma(r)ina */
      stroke-width: 9;
      animation: letter-animation 8s linear forwards;
      animation-delay: 2.45s;
  }
  
  .a-2 { /* M(a)rina */
      stroke-width: 8;
      animation: letter-animation 8s linear forwards;
      animation-delay: 2.25s;
  }
  
  .a-1 { /* M(a)rina */
      stroke-width: 10;
      animation: letter-animation 8s linear forwards;
      animation-delay: 2s;
  }
  
  .M-3 { /* (M)arina */
      stroke-width: 20;
      animation: letter-animation 5s linear forwards;
      animation-delay: 1.53s;
  }
  
  .M-2 { /* (M)arina */
      stroke-width: 20;
      animation: letter-animation 5s linear forwards;
      animation-delay: 1.05s;
  }
  
  .M-1 { /* (M)arina */
      stroke-width: 18;
      animation: letter-animation 5s linear forwards;
  }
  
  @keyframes letter-animation {
      0% {
          stroke-dashoffset: 2600;
      }
      100% {
          stroke-dashoffset: 0;
      }
  }