potpack
A tiny JavaScript library for packing 2D rectangles into a near-square container,
which is useful for generating CSS sprites and WebGL textures. Similar to shelf-pack,
but static (you can't add items once a layout is generated), and aims for maximal space utilization.
A variation of algorithms used in
rectpack2D and
bin-pack,
which are in turn based on
this article by Blackpawn.
Example usage
import potpack from 'potpack';
const boxes = [
{w: 300, h: 50},
{w: 100, h: 200},
...
];
const {w, h, fill} = potpack(boxes);
boxes[0];
boxes[1];
Install
Install with NPM: npm install potpack
.
Potpack is provided as a ES module, so it's only supported on modern browsers, excluding IE:
<script type="module">
import potpack from 'https://cdn.skypack.dev/potpack';
...
</script>
In Node, you can't use require
— only import
in ESM-capable versions (v12.15+):
import potpack from 'potpack';