Creates a web page background of tesselating triangles with hover effect
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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 the 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.