Particle JS Vanilla Background Generator

ParticleJS Background ready to use and can be customizable via the parameters inside the url.

Context

I like to use particle-js as a background for my project and I always have to installed the dependency and customize it, which takes me a few minutes to accomplish. So I decided to deploy this simple app which would be always accesible to anyone and also can change the way the particles work and see!

Implementation

This is one of the project which can be easily implemented in plain javascript, without framework! So all the code is just 1 html, 1 css and 3 js files!

Using it

As I said this is accesible to anyone, I decided to host the applicaiton in github pages.

https://emasuriano.github.io/particle-js-background/

By the time I did this small version, you are allowed to send:

• backgroundColor: This a RGB color which will change the background color of the page. Example
• particles: This is the whole particlesJs configuration. I highly recommend you to use the official particlesJS demo in order to know all the possible values inside the configuration and then you can exported to a JSON to save it! IMPORTANT - remember to encode the config before sending inside the url!Example

Another important aspect of the application, in case the user doesn't provide any values for customization, therefore we don't have to send the full configuration object inside the url!

Simple example

Let's suppose that I want my background to be grey and my particles to be purple. Similar to this:

{
  "backgroundColor": "#292929",
  "particles": {
    "color": {
      "value": "#aa00aa"
    },
    "line_linked": {
      "color": "#aa00aa"
    }
  }
}

So the background will be sent without any conversion inside the URL, meanwhile we must convert the particles configuration using the following function.

function encodeParticlesConfig(config) {
  return encodeURIComponent(JSON.stringify(config));
}

The resulting URL will be this:

https://emasuriano.github.io/particle-js-background/?backgroundColor=292929&particles=%7B%22particles%22%3A%7B%22color%22%3A%7B%22value%22%3A%22%23aa00aa%22%7D%2C%22line_linked%22%3A%7B%22color%22%3A%22%23aa00aa%22%7D%7D%7D