Infinite SVG Triangle Fusion

A demo to infinitely animate inline SVGs within a hexagonal grid layout.

Triangles are created. Triangles are destroyed. And so on and so forth.

What's going on here?

In this pen, I am creating 60 SVGs that each contain 4 triangles (polygons). Each polygon loops through a color and animates outward from the center point of its parent SVG every 1 second. The entire animation repeats infinitely every 4 seconds.

How are the triangles combining?

Each div has a clip-path to create a hexagon mask. When the hexagons are snapped together, the expanding triangles bleed evenly into the triangles of the adjacent hexagons until they disappear.

How are the hexagons connected?

I used CSS Grid as a starting point, but I was still left with a bunch of well-mannered hexagons with empty space in between. To "connect" the hexagons, I identified the nth-children that corresponds to a row and moved them up and over via transform: translate;