Replicating an svg animation

HTML-CSS
1

When this site firsts loads there’s this animation where there’s a triangle that traces over another triangle.

http://nueuphoria.com/

How would I replicate the same thing?

Where the triangle traces over the other triangle.

Can someone provide a jsfiddle of it’s done.

I found this from the site, but I don’t know how to put it together.

https://jsfiddle.net/s2z3xyd8/6/


     <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 47.96 51.66"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:4px;}</style></defs><g id="Слой_2" data-name="Слой 2"><g id="play"><path class="cls-1" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.8
2

The short answer is I can see the triangle (without checking I’m assuming that’s the path you have), therefore all they are doing is just changing the color of the stroke. I’d search google for youtube videos about animating the stroke of an svg shape even though it’s a line and not a preset shape. You’ll probably find some decent articles along the way. I don’t know if it’s animated with CSS, JS or GSAP.