Replicating an svg animation - svg

Question

When this site first loads there’s this animation where there’s a triangle that traces over another triangle.
Image
http://nueuphoria.com/
How would I replicate the same thing?
Where the triangle traces over the other triangle.
Can someone provide a jsfiddle of how it's done.
I found this from the site, but I don't know how to put it together.
https://jsfiddle.net/s2z3xyd8/6/
<div>
<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.83"></path>
</g>
</g>
</svg>
</div>

Answer 1

It is just using the common line drawing technique of animating the stroke-dashoffset. The bit you were missing was the #keyframes` definition(s).
.logo-load_w svg path {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
-webkit-animation: draw 20s infinite linear;
animation: draw 20s infinite linear;
}
#-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<div class="logo-load_w">
<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.83"></path></g></g></svg>
</div>
The dark triangle in the background is just a second copy of the SVG, with the stroke colour set to a different colour.
Update
The simplest way to have a darker triangle behind the blue one, is not the way the original site does it. It is easier just to add a second copy of the triangle into the SVG. You put it earlier in the SVG, so that it is drawn first. And make its stroke colour black.
.logo-load_w svg .play {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
-webkit-animation: draw 20s infinite linear;
animation: draw 20s infinite linear;
}
#-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<div class="logo-load_w">
<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 class="cls-1">
<path stroke="black"
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.83"/>
<path class="play"
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.83"/>
</g>
</g>
</svg>
</div>