Random SVG Background Generator In JavaScript – rbgen.js

Preview:

Description:

rbgen.js is a tiny JavaScript library that can generate random SVG background images for any container elements.

How to use it:

1. Download and import the rbgen.js library.

<script src="rbgen.js"></script>

2. Add the CSS class ‘rbgen’ to the target container element.

<div class="rbgen">
  ...
</div>

3. Initialize the rbgen.js and apply the SVG background image to the container.

let rbgen = new Rbgen();
rbgen.apply();

4. Config the SVG background image with the following HTML data attributes:

<div class="rbgen"
     data-rbgen-width="1920"
     data-rbgen-height="1080"
     data-rbgen-tone="pastel" // pastel, medium, dark
     data-rbgen-shapes="circles" // circles, rectangles
     data-rbgen-shapes-count="20"
     data-rbgen-shapes-color-hex="#000000"
     data-rbgen-shapes-max-opacity="0.05"
>

Changelog:

02/04/2023

• JS Update