svg {
    width: 256px;
    height: 256px;
  }
  
  /* SMOKE */
  #smoke-1 {
    stroke-dasharray: 0, 10;
    animation: smoke 6s ease infinite;
  }
  
  #smoke-2 {
    stroke-dasharray: 0, 10;
    animation: smoke 6s 0.5s ease infinite;
  }
  
  @keyframes smoke {
    0% { stroke-dasharray: 0, 10; }
    50% { stroke-dasharray: 10, 0; }
    100% { stroke-dasharray: 10, 0; opacity: 0; }
  }
  
  /* WRITING */
  #line-1 {
    opacity: 0;
    animation: writing 3s .5s linear infinite;
  }
  
  #line-2 {
    opacity: 0;
    animation: writing 2s .5s linear infinite;
  }
  
  #line-3 {
    opacity: 0;
    animation: writing 3s 1s linear infinite;
  }
  
  #line-4 {
    opacity: 0;
    animation: writing 4s 2s linear infinite;
  }
  
  @keyframes writing {
    0% { width: 0px; opacity: 1;}
    100% { width: 14px; opacity: 1;}
    
  }