Outlined triangle svg animation - css

Question

I've created a simple outlined triangle. The problem i need to solve - is to create animation of filling the gap between triangles from bottom to top.
When i am using the fill option for polygons, the fill area overlaps the other triangle, so that there is no "hole" in the shape.
body{
background: #7085EA;
}
.triangle-container{
width: 500px;
margin: auto;
text-align:center;
}
.triangle {
stroke: #fff;
fill: transparent;
}
<div class="triangle-container">
<svg height="500" width="500">
<polygon points="250,100 100,400 400,400" class="triangle"/>
<polygon points="250,180 160,360 340,360" class="triangle"/>
</svg>
</div>
Initial codepen is here.
The area that needs to be filled is shown on screenshot here
Any help is appreciated. Thanks in advance!

Answer 1

Based on the advices here, and an another SO issue, came up with the following solution:
body{
background: #7085EA;
}
.triangle-container{
width: 500px;
margin: auto;
text-align:center;
}
.triangle {
stroke: #fff;
}
<div class="triangle-container">
<svg height="500" width="500">
<linearGradient id="loading" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="40%" stop-opacity="1" stop-color="#fff">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="#fff">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
</stop>
</linearGradient>
<path d="M250,100 L100,400 400,400 250,100 M250,180 L340,360 160,360 250,180z" class="triangle" fill="url(#loading)"></path>
</svg>
</div>