1

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

enter image description here

Any help is appreciated. Thanks in advance!

Deepu Reghunath
  • 8,132
  • 2
  • 38
  • 47
Taki
  • 68
  • 8
  • 1
    You can use this path instead of the 2 triangles: `` and fill it with a color or with a pattern. Try this pattern: ` ` – enxaneta Sep 09 '19 at 10:19

1 Answers1

4

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>
Taki
  • 68
  • 8