Avatars plugin added other identicon types (needs config settings)

plugins/avatars/identicon.js

@@ -0,0 +1,69 @@
+
+(()=>{
+
+const size = 50,
+	margin = 0.08;
+
+window.identiconSvg = (hash, txt) => {
+	// color defaults to last 7 chars as hue at 70% saturation, 50% brightness
+	// hsl2rgb adapted from: https://gist.github.com/aemkei/1325937
+	let h = (parseInt(hash.substr(-7), 16) / 0xfffffff) * 6, s = 0.7, l = 0.5,
+		v = [
+			l += s *= l < .5 ? l : 1 - l,
+			l - h % 1 * s * 2,
+			l -= s *= 2,
+			l,
+			l + h % 1 * s,
+			l + s
+		];
+
+	if (txt) {
+		const color = 'rgb(' + [
+				v[ ~~h % 6 ] * 255 / 2, // red
+				v[ (h | 16) % 6 ] * 255 / 2, // green
+				v[ (h |  8) % 6 ] * 255 / 2 // blue
+			].map(Math.round).join(',') + ')';
+		txt = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}px" height="${size}px" viewBox="0 0 ${size} ${size}" version="1.1">
+			<circle fill="${color}" width="${size}" height="${size}" cx="${size/2}" cy="${size/2}" r="${size/2}"/>
+			<text x="${size}%" y="${size}%" style="color:#FFF" alignment-baseline="middle" text-anchor="middle"
+				 font-weight="bold" font-size="${Math.round(size*0.5)}"
+				 dy=".1em" dominant-baseline="middle" fill="#FFF">${txt}</text>
+			</svg>`;
+	} else {
+		const color = 'rgb(' + [
+				v[ ~~h % 6 ] * 255, // red
+				v[ (h | 16) % 6 ] * 255, // green
+				v[ (h |  8) % 6 ] * 255 // blue
+			].map(Math.round).join(',') + ')',
+			cell = Math.floor((size - ((Math.floor(size * margin)) * 2)) / 5),
+			imargin = Math.floor((size - cell * 5) / 2),
+			rectangles = [],
+			add = (x, y) => rectangles.push("<rect x='" + (x * cell + imargin)
+				+ "' y='" + (y * cell + imargin)
+				+ "' width='" + cell + "' height='" + cell + "'/>");
+
+		// the first 15 characters of the hash control the pixels (even/odd)
+		// they are drawn down the middle first, then mirrored outwards
+		for (let i = 0; i < 15; ++i) {
+			if (!(parseInt(hash.charAt(i), 16) % 2)) {
+				if (i < 5) {
+					add(2, i);
+				} else if (i < 10) {
+					add(1, (i - 5));
+					add(3, (i - 5));
+				} else if (i < 15) {
+					add(0, (i - 10));
+					add(4, (i - 10));
+				}
+			}
+		}
+		txt = "<g style='fill:" + color + "; stroke:" + color + "; stroke-width:" + (size * 0.005) + ";'>"
+			+ rectangles.join('')
+			+ "</g>";
+	}
+	return 'data:image/svg+xml;base64,' + btoa(
+		"<svg xmlns='http://www.w3.org/2000/svg' width='" + size + "' height='" + size + "'>" + txt + "</svg>"
+	);
+};
+
+})();