Interactive Colorful Triangle Background with JavaScript and Canvas – Triangles.js

Triangles.js is a standalone JavaScript library which uses canvas 2D API to generate a colorful polygon (triangle, geometric) background with mouse interaction.

How to use it:

Include the triangles.js JavaScript library on the html page.

<script src="triangles.js"></script>

Create an Html5 canvas element on your html page.

<canvas id="canvas"></canvas>

Create an alternative element for the interaction effect.

<div id="altBG"></div>

The required CSS styles.

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
div {
  position: absolute;
  top: 0;
  left: 0;
}

The JavaScript.

var canvas = document.getElementById("canvas");
var altBG = document.getElementById("altBG");
var triangle = new TriangleBG({
    canvas : canvas,
    alternateElem : altBG,
    cellHeight : 120,
    cellWidth : 100,
    mouseLight : true,
    mouseLightRadius : 500,
    mouseLightIncrement : 10,
    resizeAdjustment : true,
    variance : 1.3,
    pattern : "x*y",
    baseColor1 : {
      baseHue : 120,
      baseSaturation : 60,
      baseLightness : 38
    },
    baseColor2 : {
      baseHue : 120,
      baseSaturation : 60,
      baseLightness : 40
    },
    colorDelta : {
      hue : 1,
      lightness : 0,
      saturation : 0
    }
});