Modern Geometric Shapes Generator With JavaScript and SVG

Preview:

Description:

A JavaScript library that helps easily generate scalable, customizable, rotatable shapes (circles, triangles, rectangles, waves, etc) to create beautiful, eye-catching backgrounds for your website.

How to use it:

1. Download the package and load the following JavaScript files in the document.

<!-- Predefined SVG shapes -->
<script src="shapes.js"></script>
<!-- Main JavaScript -->
<script src="shapegenerator.js"></script>

2. Specify the element in which the shapes will be generated.

// the whole body
let element = document.body;

3. Set the number of shapes to generate.

let numberOfShapes = 5;

4. Determine whether to rotate shapes.

let rotation = true;

5. Specify the mode: 1 or 2.

1. the shapes are generated in black color but have a colored rectangle shape with them on the corner
2. the shapes are generated and colored from the colorList without any rectangles

let mode = 2;
let colorList = [
    // colors here
];

6. Generate the shapes.

generateShapes(element, colorList, numberOfShapes, mode, rotation);

Changelog:

05/01/2023

• v1.0.1

03/02/2023

• validating the last edit of changing the way we pass parameters and added more validation into it