title: Create animated SVG paths
body: <p>I'm trying to draw an anmiated SVG path to a div block which also animates the opacity of other elements depending on the current animation state. 
  Basically something like: <a href="https://www.biggerpicture.agency/about-us#main" rel="nofollow noreferrer">https://www.biggerpicture.agency/about-us#main</a> under "Our Philosophy".</p>
  
  <p>I managed to create my hexagon shape and animating it using the stroke-dashoffset method but I'm struggling on how to include the animations for manipulating the opacity of some other div blocks.
  Would be great if you guys could give me a hint on how to do this.</p>
  
  <pre><code>&lt;svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="100%" height="100%" viewBox="0 0 600 600" xml:space="preserve"&gt;
  &lt;path class="polygon" d="M267,30l271,146l14,262L329,566L26,380l70.9-254.3L267,30z"/&gt;
  &lt;/svg&gt;
  
  
  
  
  &lt;style&gt;
  .polygon {
          fill: none;
          stroke: white;
          stroke-width: 3;
          stroke-dasharray: 1650;
          stroke-dashoffset: 1650;
          animation-name: draw-polygon;
          animation-duration: 4s;
          animation-fill-mode: forwards; 
          animation-iteration-count: 1;
          animation-timing-function: ease-in-out;
  }    
  
  @keyframes draw-polygon {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  &lt;/style&gt;
  </code></pre>