✨ logo variations

assets/logo/generate.js

@@ -1,12 +1,52 @@
-const sizes = [16, 32, 64, 128, 256, 512, 1024, 2048];
-// const sizes = [1024];
-const formats = ["png", "jpg", "webp", "ico"];
-// const formats = ["png"];
+var sizes = [
+	20,
+	29,
+	32,
+	40,
+	48,
+	50,
+	55,
+	57,
+	58,
+	60,
+	64,
+	72,
+	76,
+	80,
+	80,
+	87,
+	88,
+	100,
+	114,
+	120,
+	128,
+	144,
+	152,
+	167,
+	172,
+	180,
+	180,
+	196,
+	216,
+	256,
+	512,
+	1024,
+];
+
+const density = 300;
+const quality = 100;
+const lossless = true;
+// var sizes = [16, 32, 64, 128, 256, 512, 1024, 2048];
+var sizes = [2048];
+
+var formats = ["png", "jpg", "webp", "ico"];
+var formats = ["png"];
+
 const files = ["icon.svg", "icon_fullsize.svg", "icon_round.svg"];
 // const files = ["icon.svg"];
 
-const styles = {
-	default: ``,
+var styles = {
+	// default: ``,
 	dropshadow: [
 		`#blob {
 			filter: url(#dropshadow);
@@ -21,31 +61,31 @@ const styles = {
 			</feMerge>
 		</filter>`,
 	],
-	inner_shadow: [
-		`#blob {
-			filter: url(#InnerShadow);
-		}
-		.eye {
-			filter: url(#dropshadow);
-		}`,
-		`<filter id="dropshadow" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
-			<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"/>
-			<feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
-			<feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.4 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"/>
-			<feMerge>
-				<feMergeNode in="shadowMatrixOuter1"/>
-				<feMergeNode in="SourceGraphic"/>
-			</feMerge>
-		</filter>
-		<filter id="InnerShadow" height="130%">
-			<feOffset dx="0" dy="0" />
-			<feGaussianBlur stdDeviation="10" result="blurOut"/>
-			<feComposite in="SourceGraphic" in2="blurOut" operator="out" result="inverseOut"/>
-			<feFlood flood-color="black" flood-opacity="1" result="color" />
-			<feComposite in="color" in2="inverseOut" operator="in" result="shadow"/>
-			<feComposite in="shadow" in2="SourceGraphic" operator="over" />
-		</filter>`,
-	],
+	// inner_shadow: [
+	// 	`#blob {
+	// 		filter: url(#InnerShadow);
+	// 	}
+	// 	.eye {
+	// 		filter: url(#dropshadow);
+	// 	}`,
+	// 	`<filter id="dropshadow" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
+	// 		<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"/>
+	// 		<feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+	// 		<feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.4 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"/>
+	// 		<feMerge>
+	// 			<feMergeNode in="shadowMatrixOuter1"/>
+	// 			<feMergeNode in="SourceGraphic"/>
+	// 		</feMerge>
+	// 	</filter>
+	// 	<filter id="InnerShadow" height="130%">
+	// 		<feOffset dx="0" dy="0" />
+	// 		<feGaussianBlur stdDeviation="10" result="blurOut"/>
+	// 		<feComposite in="SourceGraphic" in2="blurOut" operator="out" result="inverseOut"/>
+	// 		<feFlood flood-color="black" flood-opacity="1" result="color" />
+	// 		<feComposite in="color" in2="inverseOut" operator="in" result="shadow"/>
+	// 		<feComposite in="shadow" in2="SourceGraphic" operator="over" />
+	// 	</filter>`,
+	// ],
 };
 
 // 84,117,244
@@ -57,12 +97,15 @@ const colors = {
 	}`,
 	white: `
 	.eye {
-		fill: black;
+		fill: white;
 	}
 	#background {
 		fill: white;
 	}
 
+	#blob {
+		fill: black;
+	}
 	svg {
 		background: black;
 	}
@@ -135,7 +178,9 @@ for (const file of files) {
 					});
 
 					execSync(
-						`sharp -i ${temp} -o ${output} --density 100 --progressive true -q 100 --lossless resize ${size}`
+						`sharp -i ${temp} -o ${output} --density ${density} --progressive true -q ${quality} ${
+							lossless ? "--lossless" : ""
+						} resize ${size}`
 					);
 					console.log(`[File] written ${output}`);
 				}

assets/logo/temp.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 1024" xml:space="preserve">
+	<style type="text/css">
+		#blob {
+			fill: white;
+		}
+#blob {
+			filter: url(#dropshadow);
+		}#background {
+			fill: url(#gradient);
+		}</style>
+	<g id="background">
+		<path id="icon" d="M727,1025H298C134.1,1025,0,890.9,0,727V299C0,135.1,134.1,1,298,1h429c163.9,0,298,134.1,298,298v428
+				C1025,890.9,890.9,1025,727,1025z" />
+		<path id="blob" d="M504.3,256c-62.6,0.5-123.1,10.3-180,28.1c-41.4,12.9-75.8,42.1-95.2,81c-36.4,73-59,154.1-64.5,239.9
+		c-0.8,13.4-1.3,26.8-1.3,40.4v0.5c0,31.6,17.2,60.9,44.7,76.2c20.8,11.6,42.3,22,64.5,31.2c35.8,14.8,77,4.2,101.1-26.2
+		c2-2.5,4-5,5.9-7.6c9.5-12.3,24.9-18.6,40.2-16.3c29.3,4.2,59.2,6.4,89.6,6.4c30.4,0,60.3-2.2,89.6-6.4
+		c15.4-2.2,30.7,4,40.2,16.3c2,2.5,3.9,5.1,5.9,7.6c24.1,30.4,65.4,41,101.1,26.2c22.2-9.2,43.7-19.6,64.5-31.2
+		c27.6-15.3,44.7-44.5,44.7-76.2v-0.5c0-13.6-0.4-27.1-1.3-40.4c-5.4-85.8-28.1-166.9-64.5-239.9c-19.4-38.9-53.9-68.1-95.2-81
+		c-57-17.8-117.4-27.6-180.1-28.1c-1.7,0-3.4,0-5.1,0C507.8,256,506.1,256,504.3,256" />
+
+		<path id="lefteye" class="eye" d="M318.5,511.9c0,35.3,28.5,64,63.7,64c35.2,0,63.7-28.7,63.7-64c0-35.3-28.5-64-63.7-64
+					C347,447.9,318.5,476.6,318.5,511.9" />
+		<path id="righteye" class="eye" d="M573.2,511.9c0,35.3,28.5,64,63.7,64c35.2,0,63.7-28.7,63.7-64c0-35.3-28.5-64-63.7-64
+					C601.7,447.9,573.2,476.6,573.2,511.9" />
+	</g>
+<filter id="dropshadow" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
+			<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"/>
+			<feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+			<feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.4 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"/>
+			<feMerge>
+				<feMergeNode in="shadowMatrixOuter1"/>
+				<feMergeNode in="SourceGraphic"/>
+			</feMerge>
+		</filter><linearGradient id="gradient" gradientTransform="rotate(90)">
+			<stop offset="5%"  stop-color="rgb(84,117,244)" />
+			<stop offset="95%" stop-color="rgb(143,64,245)" />
+		</linearGradient></svg>