Modern Geometric Shapes Generator With JavaScript and SVG

Category: Javascript | May 1, 2023
Views Total:379 views
Official Page:Go to website
Last Update:May 1, 2023


Modern Geometric Shapes Generator With JavaScript and SVG


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



  • v1.0.1


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

You Might Be Interested In:

Leave a Reply