Mini randomized pixel-art textures
1 - Create a hidden HTML canvas
2 - Call pxtex(canvas, H, S, L, variation=10, width=10, height=10)
3 - Use the result PNG dataURL anywhere
Source code
pxtex=(c,H,S,L,v=10,w=10,h=10,x=c.getContext`2d`,i,j,m=Math.random)=>{for(c.width=w,c.height=h,i=w;i--;)for(j=h;j--;)x.fillStyle=`hsl(${H+(m()-.5)*v},${S+(m()-.5)*v}%,${L+(m()-.5)*v}%)`,x.fillRect(i,j,1,1);return c.toDataURL()}
Examples
The images below are zoomed 10x. Reload the page to regenerate them.
| H,S,L parameters | variation parameter
(default: 10) | width, height parameter
(default: 10) | High variation, Different L values |
|---|---|---|---|
|
pxtex(ptc,250,50,50);
|
pxtex(ptc,9,90,30,5);
pxtex(ptc,9,90,30,15);
|
pxtex(ptc,105,65,50,5,20,20);
|
pxtex(ptc,45,90,30,50,5,30);
|