Share your repls and programming experiences

← Back to all posts
Dynamic JS-free background.
h
kaldisberzins (348)

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

Comments
hotnewtop
EchoCoding (259)

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

kaldisberzins (348)

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