/
svg.ts
36 lines (29 loc) 路 1.05 KB
/
svg.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import type { Address } from "./types";
import { randomPalette } from "./image";
import { seedRandom } from "./random";
const SVG_START = `<svg `
+ `xmlns="http://www.w3.org/2000/svg" `
+ `viewBox="0 0 8 8" `
+ `shape-rendering="optimizeSpeed" `; // optimizeSpeed stays sharp thanks to using <path />
export function svg(address: Address, size: number) {
const random = seedRandom(address.toLowerCase());
const [b, c, s] = randomPalette(random);
const paths = [
`M0,0H8V8H0z`, // background
``, // color
``, // spot
];
for (let i = 0, x, y; i < 32; i++) {
x = i % 4;
y = Math.floor(i / 4);
const colorIndex = Math.floor(random() * 2.3);
if (colorIndex > 0) {
paths[colorIndex] += `M${x},${y}h1v1h-1zM${7 - x},${y}h1v1h-1z`;
}
}
return `${SVG_START}width="${size}" height="${size}">`
+ `<path fill="hsl(${b[0]} ${b[1]}% ${b[2]}%)" d="${paths[0]}"/>`
+ `<path fill="hsl(${c[0]} ${c[1]}% ${c[2]}%)" d="${paths[1]}"/>`
+ `<path fill="hsl(${s[0]} ${s[1]}% ${s[2]}%)" d="${paths[2]}"/>`
+ "</svg>";
}