Polygonal Particles Background With jQuery And Canvas - polygonizr

Polygonal Particles Background With jQuery And Canvas - polygonizr
File Size: 11.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

polygonizr is a jQuery plugin which uses JavaScript and HTML5 canvas to draw an animated, customizable, polygonal particles system on the webpage.

How to use it:

1. Insert the minified version of the jQuery polygonizr plugin after loading jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
<script src="polygonizr.min.js"></script>

2. Call the function on a container where you want to draw the particales system.

<div id="example"></div>

3. Config the particales system with the following options.


  // How long to pause in between new node-movements.
  restNodeMovements: 1,
  // When the cluster updates, this sets speed of nodes.
  duration: 3,
  // Define the maximum distance to move nodes.
  nodeMovementDistance: 100,
  // The number of node nodes to print out.
  numberOfNodes: 25,
  // Define the maximume size of each node dot.
  nodeDotSize: 2.5,
  // Sets the ease mode of the movement: linear, easeIn, easeOut, easeInOut, accelerateDecelerate.
  nodeEase: "easeOut",
  // If true, the nodes will descend into place on load.
  nodeFancyEntrance: false,
  // Makes the cluster forms an ellipse inspired formation, random if true.
  randomizePolygonMeshNetworkFormation: true,
  // Define a formula for how to initialize each node dot's position.
  specifyPolygonMeshNetworkFormation: function (i) {
    var forEachNode = {
        // Half a circle and randomized
        x: this.canvasWidth - ((this.canvasWidth / 2) + (this.canvasHeight / 2) * Math.cos(i * (2 * Math.PI / this.numberOfNodes))) * Math.random(),
        y: this.canvasHeight - (this.canvasHeight * (i / this.numberOfNodes))
    return forEachNode;
  // Number of relations between nodes.
  nodeRelations: 3,
  // The FPS for the whole canvas.
  animationFps: 30,
  // Sets the color of the node dots in the network (RGB).
  nodeDotColor: "240, 255, 250",
  // Sets the color of the node lines in the network (RGB).
  nodeLineColor: "240, 255, 250",
  // Sets the color of the filled triangles in the network (RGB).
  nodeFillColor: "240, 255, 250",
  // If valid RGB color adds a linear gradient stroke (set null to remove).
  nodeFillGradientColor: "50, 50, 50",
  // Sets the alpha level for the colors (1-0).
  nodeFillAlpha: 0.5,
  // Sets the alpha level for the lines (1-0).
  nodeLineAlpha: 0.5,
  // Sets the alpha level for the dots (1-0).
  nodeDotAlpha: 1.0,
  // Defines if the triangles in the network should be shown.
  nodeFillSapce: true,
  // Define if the active animation should glow or not (not CPU friendly).
  nodeGlowing: false,
  // Define the canvas size and css position.
  canvasWidth: $(this).width(),
  canvasHeight: $(this).height(),
  canvasPosition: "absolute"



  • Fixed bug with inifinite parameter values in createLinearGradient, got trgged when nodeFancyEntrance was set to true.
  • Fixed bug with local variables in IE


  • Updated and restructured the code a bit, exposed two new functions for stopping and starting the animation, and added option for gradient color effect as fillStyle.


  • added Opera specific function oRequestAnimationFrame

This awesome jQuery plugin is developed by revoltera. For more Advanced Usages, please check the demo page or visit the official website.