Triangles Canvas

Default values:

npm i triangles-canvas

import trianglesCanvas from 'triangles-canvas'
trianglesCanvas({
  id, // the id where the canvas should be drawn
  cb, // a callback to be run when the rendering is done
  dark = 20, // darkest color in rgba
  light = 45, // lightest color in rgba
  darkColor = 'rgba(255, 122, 5, 0.3)', // darkest color to be highlighted when mousemove
  lightColor = 'rgba(246, 90, 90, 0.3)', // lightest color to be highlighted when mousemove
  size = 25, // amount of squares to be drawn on the canvas (in px)
  refreshTime = 50 // time in ms to draw each set of triangles
})

An npm module to have a background with animated triangles using canvas. Recomputes the gradient while resizing.

Also, move your mouse over it!.

Triangles({ id: 'triangles' })

You can specify the size of the squares.

Triangles({ id: 'trianglesSquares', size: 10 })
Triangles({ id: 'trianglesSquares2', size: 40 })

You can specify starting color or ending color for the background.

Triangles({ id: 'triangles2', dark: 200, light: 220 })

Or change the highlighted color.

Triangles({ id: 'triangles3', darkColor: '#69bfa5', lightColor: '#48796b' })