title: SVG animate. Fill path after drawn
body: <p>I have created an svg file where the outlines get "drawn" when the page loads.
  After the animation is done I want to fill in the outlines.</p>
  
  <p>So this is what I have done.</p>
  
  <p>There are multiple paths. Here is one:</p>
  
  <pre><code>&lt;path id="b1" class="b1" d="M95.4,204.9a31.7,31.7,0,0,1,23,9.6,32.8,32.8,0,0,1,6.9,10.8,38.7,38.7,0,0,1,0,27.4,32.8,32.8,0,0,1-6.9,10.8,31.7,31.7,0,0,1-23,9.6,25.7,25.7,0,0,1-11.9-2.6,25.4,25.4,0,0,1-8.3-6.8v7.7H61V174H75.1v40.3a25.4,25.4,0,0,1,8.3-6.8A25.7,25.7,0,0,1,95.4,204.9Zm-1.7,13.3a19.5,19.5,0,0,0-8,1.6,18.5,18.5,0,0,0-6.1,4.4,19.7,19.7,0,0,0-4,6.6,24.6,24.6,0,0,0,0,16.5,19.7,19.7,0,0,0,4,6.6,18.5,18.5,0,0,0,6.1,4.4,20.9,20.9,0,0,0,16.1-.1,18.1,18.1,0,0,0,6.1-4.5,19.7,19.7,0,0,0,3.9-6.6,24.6,24.6,0,0,0,0-16.1,19.8,19.8,0,0,0-3.9-6.6,18.1,18.1,0,0,0-6.1-4.5A19.6,19.6,0,0,0,93.7,218.2Z" transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/&gt;
  </code></pre>
  
  <p>This is the css for the animation of the outlines:</p>
  
  <pre><code>@keyframes offset{
      to {
          stroke-dashoffset: 0;   
      }   
  }
  
  .b1{
      animation: offset 2s linear forwards;
      stroke-dasharray: 324.774;
      stroke-dashoffset: 324.774; 
  }
  </code></pre>
  
  <p>Up until here everything works just fine.<br>
  After two seconds the animation is done and now I want to fill it.<br>
  This is how I tought I might do it:<br></p>
  
  <pre><code>@keyframes fill {
      0% {
         fill: white;
         }
      100% {
         fill: black;
         }
        }
  
        #fill {
            animation-name: fill;
            animation-duration: 2s;
            animation-delay:2s;
        }
  </code></pre>
  
  <p>The problem is that I allready have an <code>id</code> and a <code>class</code> assigned to the <code>path</code><br> I tried to change the <code>path</code>'s <code>id</code> with the <code>#fill</code>.</p>
  
  <p>If I do this the outline animation get's overwritten and it just waits two seconds . After the two seconds the path get's filled by animation.</p>
  
  <p>How can I make this work? 
  What I want is to first animate the outlines and when they are done the shape must be filled.</p>
  
  <p>Thnx.</p>