Particle animation

Live demo

Add a cool animation to your web site to add life! Tree of nodes pulling on each other randomly to create a soothing behaviour. Starts with an offsets and always seek the center of canvas.

Installation

npm install particle-animation --save

Features

Available options:

   var defaultOptions = {
            id: "elementId", // element id to draw canvas
            levels: 5, // number of levels in the tree
            maximumNodes: 1000, // maximum nodes in the tree
            color:"#0059b3", // Monochrome color, will have different alpha depending on level
            palette : ["#0059b3", "#4CE038", "#E32023", "#ffa500"], //Randomly color nodes using this pallette
            relationColor: '#F5F9FA', // Used to show when parent node pulls children nodes
            usePalette:false,
            drawLines:false
        }

Available methods:

    toggleColors()
    toggleDrawLines()
    stop()
    run() 

Usage example

html file

<div id="container">
 
</div>

javascript file

import ParticleAnimation from "particle-animation"
 
var animation = new ParticleAnimation({
      id: "container",
      levels: 5,
      maximumNodes: 1000
    });
animation.run();
<script>

Release History

• 1.0.1 to 1.06
  • Just updating readme file
• 1.0.0
  • First release

Author

Erik Andreas Larsen– @mapnoter – [e-mail]

Code repository and issue reporting

• Github
• Issue reporting

License

Distributed under the ISC license.