Create animated SVG paths

Question

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: https://www.biggerpicture.agency/about-us#main under "Our Philosophy".

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.

<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">
<path class="polygon" d="M267,30l271,146l14,262L329,566L26,380l70.9-254.3L267,30z"/>
</svg>




<style>
.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;
  }
}

</style>

Answer 1

One way is to just create animations for the other objects and use animation-delay to have them begin when the line gets to the length you want.

 .polygon { fill: none; stroke: black; 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; } } .circle1, .circle2 { opacity: 0; animation-name: fade-in; animation-duration: 0.5s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timing-function: ease-in-out; } .circle1 { animation-delay: 1100ms; } .circle2 { animation-delay: 1500ms; } @keyframes fade-in { to { opacity: 1; } }

 <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="400" height="400" viewBox="0 0 600 600" xml:space="preserve"> <path class="polygon" d="M267,30l271,146l14,262L329,566L26,380l70.9-254.3L267,30z"/> <circle class="circle1" cx="538" cy="176" r="40"/> <circle class="circle2" cx="552" cy="438" r="40"/> </svg>