INFINITE SVG TRIANGLE FUSION

Author:

  • Rob DiMarzo
  • December 16, 2018

Made with:

  • HTML (Pug) / CSS (SCSS)

About the code:

Triangles are created. Triangles are destroyed.
And so on and so forth. 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.
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.
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;

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: –

Download Demo and Code

Add a Comment

Your email address will not be published. Required fields are marked *