Creating an interactive tessellating triangle website background


Over the past couple of weeks I’ve been working on an interactive triangle background for my website, you may have seen it on my homepage.

Feel free to try the demo and look at the code on github.

Here’s an overview of the project:

  • Dynamically generated - The triangles are calculated dynamically and are drawn onto an HTML5 Canvas element.
  • Interactivity - It features a mouse-hover action which affects the colour of triangles near the mouse pointer, causing a highlight effect.
  • NPM Package - I published the project as a library, and made it available as an NPM Package. You can visit the NPM Package page here.