Author:
- Rob DiMarzo
- December 16, 2018
Made with:
- HTML (Pug) / CSS (SCSS)
About the code:
This is a nice and simple Background Animations in which triangles are created and 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
