Creates a web page background of tessellating triangles with hover effect

Download .zip Download .tar.gz View on GitHub

Triangle Background

Creates a tessellating triangle background for your web page, with rollover highlight effect


new TriangleBackground(
    containerElement,    // A DOM element, or CSS selector
    options              // Object containing options

Option Reference

options: {
    color: [],                   // Specify the colours to use for the triangles, must be an array of hexadecimal style colours, defaults to a selection of greys
    mouseHoverHighlight: {       // Options for the hover highlight effect, replace with false to disable
        color: '#ffffff'         // Hover highlight colour in hex format (default '#ffffff')
        radius: 100              // Hover highlight radius (default 100)


With NPM

npm install --save triangle-background

Without NPM

Download and extract latest zip file into your project:

Getting Started

With Browserify

var TriangleBackground = require('triangle-background');

new TriangleBackground('#background');

Without Browserify

<!doctype html>
<div id="background"></div>
<script src="node_modules/triangle-background/dist/triangle-background.min.js"></script>
    new TriangleBackground('#background');


As the background DOM element will be given position fixed, other elements will need to be positioned (e.g. relative) to appear above the background.