A javscript library for generating nice and minimal shapes in the background of your page.
npm install shapes-generator- add the following to your html (or js) file
<script>
const generateShapes = require('shapes-generator');
generateShapes();
</script>
- run the page and enjoy!
Note: It is recommended to give your element z-index: -1; so the shapes will be underneath everything. THe library add that otumatically but it doesn't work on all the browsers for now.
An object containing the following parameters (all optional):
- element: the element you want to add the shapes into (element object). Note: if not specified the shapes will be added to the body of the page
- options: an object containing the options you want to tweek(object). Like the colors of the shapes or how many shapes you want to add. Check the table below for all options availabe.
| Option | Description | Default |
|---|---|---|
| colorList | a list of colors you want the shapes to be (an array of colors as strings) | Some flat colors |
| numberOfShapes | the number of shapes you want to be generated in the page (integer number) | 5 |
| mode | the mode you want the shapes to be generated in (1 or 2) | 1 |
| rotation | whether or not you want the shapes to be rotated (true or false) | true |
- mode 1: the shapes are generated and colored from the colorList without any rectangles (default)
- mode 2: the shapes are generated in black color but have a colored rectangle shape with them on the corner
<script>
generateShapes({
element: document.body,
options: {
colorList: ["#a29bfe","#ff7675","#55efc4","#636e72"],
numberOfShapes: 20,
mode: 1,
rotation: true
}
});
</script>