Dynamic JS-free background.
Check out the demo here.
- Very lightweight (~1KB size)
- Customization options
- Hosted without pause (The repl is kept awake 24/7)
- Easy to use
How do you use it?
Step 1: Create your background
Go to the builder tool and choose how your background will look. There are a bunch of options so let's have a look at them:
How fast the particles will move in pixels/second. Values from 0 to 10.
How many particles will there be proportionally to the size of the screen. The value is in particles per million pixels. If you resize the window it will increase/decrease the amount of particles proportionally. Values from 1 to 400.
The radius of the particles in pixels. Values from 1 to 10.
The background color of the
The color that all the particles will have
The color that the lines between the particles will have.
If the box is checked then the size of the particles will get slightly randomized within 2 pixels of the specified particle size.
If the box is checked then your cursor is treated as a particle and will make lines to other particles.
Click apply to see the changes and to generate the code snippet.
Step 2: Add the code to your website
Once you click apply, you will see that the text box with some
HTML in it changes. Copy all of this new
HTML into your website.
You can give the
iframe element an
id to reference it in
Once you have it in your website, treat it like a normal div element. Place it how you like, give it whatever size you like - it scales to whatever size you need.
If you want to have it be a background like in the demo then consider using this sort of a structure:
and then you can add some
CSS like so:
Step 3: Done!
I hope you like this tool and find a good use for it. It was definitely tons of fun to make it. If you liked it, leave a comment on what was good and what was not so good. You can leave me an upvote as well. I would love to see what you can make out of this. If you use this for anything comment a link to it so we all can see. Feel free to leave any suggestions in the comments as well. Report any bugs that you encounter and don't hesitate to ask for help if you need any. If it is a problem many encounter I will try to make it simpler to understand. If you want to check out the repls they are:
You are free to use this background in any website of yours without asking me first. Attribution would be nice but is not necessary.