Fill background of icons randomly spread and oriented.
If you have a local version of the lib <script type="text/javascript" src="fillBackground.js"></script>
If you prefer to have a remote version of the lib <script type="text/javascript" src="https://unpkg.com/fillbackground@latest/fillBackground.js"></script>
Background can be filled upon body load or any other event, see example below.
A canvas item must be added on the top of the body, it will take all screen, its id should be given to the fillBackground function.
Note : So far no refresh upon resolution change (or smartphone rotation)
fillBackground(idCanvas, color, icons , opacity, size = 100, minMargin = 10, staticOrientation = false)
idCanvas is the html id associated to the canvas
color is the color used to fill the background (can be hex color)
icons is either a unique icon or a list of icons (file path should be provided)
opacity is the level of opacity of the background (by default 96%), 100% is fully opaque and 0% is fully transparent
size is the normalized size of icons (by default 100px) to be displayed
minMargin is the minimum space between icons (not so accurate so far)
staticOrientation is the angle in degree to render all icons. By default, all icons have random orientation.
<body onload="fillBackground('fillBackground', 'orange', ['img1.png', 'img2.png','img3.png'], 96, 100, 25)">
<canvas id="fillBackground" >
</canvas>
<h1>Test page</h1>
</body>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent