Skip to content
← Back to Community
Dynamic JS-free background.
Profile icon
h
has Hacker Plan
kaldisberzins

This file cannot be displayed: https://storage.googleapis.com/replit/images/1559773693182_ffce9ccbc6d311669c830dac96dfbb24.pn


Check out the demo here.

A very simple to use background tool that you can place into your website without any knowledge of javascript.

Features

  • 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:

Speed
How fast the particles will move in pixels/second. Values from 0 to 10.

Particle density
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.

Particle size
The radius of the particles in pixels. Values from 1 to 10.

Background color
The background color of the iframe

Particle color
The color that all the particles will have

Line color
The color that the lines between the particles will have.

Random size
If the box is checked then the size of the particles will get slightly randomized within 2 pixels of the specified particle size.

Interactive
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 CSS.
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:

<div id="container"> <div id="background"> <!-- The code snippet here --> </div> <div id="content"> <!-- Any stuff you wanna put on top --> </div> </div>

and then you can add some CSS like so:

container{ width:100vw; height:100vh; } background{ position:absolute; z-index:-100; } /*whatever id you give the iframe*/{ width:100%; height:100%; } content{ position:relative; z-index:100; /*other site-specific stuff*/ }

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:

Note

You are free to use this background in any website of yours without asking me first. Attribution would be nice but is not necessary.
Regards,
@kaldisberzins

Voters
Profile icon
rusty123321123
Profile icon
BraulioVadir
Profile icon
AnushaDhar
Profile icon
YC92
Profile icon
Kognise
Profile icon
Vandesm14
Profile icon
abc3354
Profile icon
jajoosam
Profile icon
timmy_i_chen
Profile icon
EthanJustice
Comments
hotnewtop
Profile icon
EchoCoding

This is awesome! I'm going to make a website and integrate this as soon as I can. And I'll credit you, not to worry :)

Profile icon
kaldisberzins

@EchoCoding Cool! I want to see what you make!

Profile icon
timmy_i_chen

So cool!

Profile icon
kaldisberzins

@timmy_i_chen Thanks