Simplify logo generation

logo.svg

@@ -9,127 +9,100 @@
   <defs>
     <!-- Background patterns -->
     <pattern id="dark-pattern" patternUnits="userSpaceOnUse" width="100%" height="100%">
-      <image xlink:href="dark.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
       <rect width="100%" height="100%" />
+      <image xlink:href="dark.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
     </pattern>
     <pattern id="light-pattern" patternUnits="userSpaceOnUse" width="100%" height="100%">
-      <image xlink:href="light.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
       <rect width="100%" height="100%" />
+      <image xlink:href="light.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
     </pattern>
     <pattern id="middle-pattern" patternUnits="userSpaceOnUse" width="100%" height="100%">
-      <image xlink:href="middle.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
       <rect width="100%" height="100%" />
+      <image xlink:href="middle.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
     </pattern>
 
-    <!-- Gradients for arrow -->
-    <linearGradient id="dark-arrow-gradient" x1="0" x2="1" y1="0" y2="1">
-      <stop stop-color="white" offset="41.5%" />
-      <stop stop-color="black" offset="49.9%" />
-    </linearGradient>
-    <linearGradient id="light-arrow-gradient" x1="1" x2="0" y1="1" y2="0">
-      <stop stop-color="white" offset="41.5%" />
-      <stop stop-color="black" offset="49.9%" />
-    </linearGradient>
-    <linearGradient id="x-gradient" x1="0" x2="1" y1="0" y2="0">
-      <stop stop-color="white" offset="11%" />
-      <stop stop-color="black" offset="84%" />
-    </linearGradient>
-    <linearGradient id="y-gradient" x1="0" x2="0" y1="1" y2="0">
-      <stop stop-color="white" offset="11%" />
-      <stop stop-color="black" offset="84%" />
-    </linearGradient>
-
-    <!-- Cutoff mask -->
-    <mask id="cutoff-mask">
-      <rect x="0%" y="0%" width="100%" height="100%" fill="black" />
+    <!-- Crop masks -->
+    <mask id="outer-crop-mask">
+      <rect width="100%" height="100%" fill="black" />
       <circle cx="50%" cy="50%" r="50%" fill="white" />
     </mask>
-
-    <!-- Crossover definitions -->
-    <mask id="x-mask">
-      <rect x="0%" y="0%" width="100%" height="100%" fill="white" />
-      <rect x="0%" y="0%" width="100%" height="46%" fill="black" />
-      <rect x="0%" y="54%" width="100%" height="46%" fill="black" />
+    <mask id="inner-crop-mask">
+      <rect width="100%" height="100%" fill="white" />
       <circle cx="50%" cy="50%" r="5.656854249%" fill="black" />
     </mask>
-    <mask id="y-mask">
-      <rect x="0%" y="0%" width="100%" height="100%" fill="white" />
-      <rect x="0%" y="0%" width="46%" height="100%" fill="black" />
-      <rect x="54%" y="0%" width="46%" height="100%" fill="black" />
-      <circle cx="50%" cy="50%" r="5.656854249%" fill="black" />
+
+    <!-- Layer 1 -->
+    <linearGradient id="layer-1-gradient" x1="0" x2="0" y1="0" y2="1">
+      <stop stop-color="white" offset="16%" />
+      <stop stop-color="black" offset="91%" />
+    </linearGradient>
+    <mask id="layer-1-gradient-mask">
+      <rect width="100%" height="50%" fill="url(#layer-1-gradient)" />
+    </mask>
+    <mask id="layer-1-alt-gradient-mask">
+      <rect width="100%" height="100%" fill="url(#layer-1-gradient)" transform="translate(512 0) scale(-1 1) rotate(-90 256 256)" />
     </mask>
-    <mask id="x-gradient-mask">
-      <rect x="0%" y="0%" width="100%" height="100%" fill="white" />
-      <rect x="50%" y="0%" width="50%" height="100%" fill="url(#x-gradient)" />
+    <mask id="layer-1-mask">
+      <rect x="46%" width="8%" height="50%" fill="white" />
     </mask>
-    <mask id="y-gradient-mask">
-      <rect x="0%" y="0%" width="100%" height="100%" fill="white" />
-      <rect x="0%" y="0%" width="100%" height="50%" fill="url(#y-gradient)" />
+    <mask id="layer-1-alt-mask">
+      <rect width="100%" height="100%" fill="white" mask="url(#layer-1-mask)" transform="translate(512 0) scale(-1 1) rotate(-90 256 256)" />
     </mask>
 
-    <!-- Grid definitions -->
-    <mask id="dark-grid-mask">
-      <rect x="0%" y="0%" width="100%" height="100%" fill="white" />
+    <!-- Layer 2 -->
+    <linearGradient id="layer-2-gradient" x1="0" x2="1" y1="0" y2="1">
+      <stop stop-color="white" offset="50%" />
+      <stop stop-color="black" offset="50%" />
+      <stop stop-color="white" offset="58.5%" />
+    </linearGradient>
+    <mask id="layer-2-mask">
+      <rect width="100%" height="100%" fill="url(#layer-2-gradient)" />
       <circle cx="50%" cy="50%" r="42%" fill="black" />
-      <rect x="46%" y="70%" width="8%" height="25%" fill="white" transform="rotate(-45 256 256)" />
-      <rect x="0%" y="0%" width="100%" height="50%" fill="black" transform="rotate(45 256 256) translate(0 -20)" />
-      <rect x="46%" y="50%" width="8%" height="46%" fill="white" />
-      <rect x="-4%" y="40%" width="25%" height="25%" fill="black" transform="rotate(-45 256 256)" />
-      <circle cx="50%" cy="50%" r="5.656854249%" fill="black" />
-      <polygon fill="black" points="-1,-1 -1,513 513,-1" />
+      <polygon points="0,0 256,256 0,512 512,512 512,256 256,256 512,0" fill="black" />
+      <rect y="46%" width="50%" height="8%" transform="rotate(45 256 256)" fill="white" />
+      <rect x="-5%" y="34%" width="60%" height="16%" transform="rotate(-45 256 256)" fill="black" />
     </mask>
-    <mask id="light-grid-mask">
-      <rect x="0%" y="0%" width="100%" height="100%" fill="white" />
-      <circle cx="50%" cy="50%" r="42%" fill="black" />
-      <rect x="46%" y="6%" width="8%" height="25%" fill="white" transform="rotate(-45 256 256)" />
-      <rect x="0%" y="0%" width="100%" height="50%" fill="black" transform="rotate(45 256 256) translate(0 -20)" />
-      <rect x="4%" y="46%" width="50%" height="8%" fill="white" />
-      <rect x="-4%" y="30%" width="25%" height="25%" fill="black" transform="rotate(-45 256 256)" />
-      <circle cx="50%" cy="50%" r="5.656854249%" fill="black" />
-      <polygon fill="black" points="-1,513 513,513 513,-1" />
+    <mask id="layer-2-alt-mask">
+      <rect width="100%" height="100%" fill="white" mask="url(#layer-2-mask)" transform="translate(512 0) scale(-1 1) rotate(-90 256 256)" />
     </mask>
 
-    <!-- Arrow definitions -->
-    <mask id="dark-arrow-mask">
-      <rect x="0%" y="0%" width="100%" height="100%" fill="url(#dark-arrow-gradient)" />
-      <circle cx="50%" cy="50%" r="42%" fill="black" />
-      <rect x="0%" y="0%" width="46%" height="100%" fill="black" />
-      <rect x="0%" y="54%" width="100%" height="46%" fill="black" />
-      <rect x="46%" y="-50%" width="8%" height="110%" fill="white" transform="rotate(45 256 256) translate(-82 282)" />
-      <rect x="0%" y="46%" width="50%" height="8%" fill="black" />
-      <rect x="40%" y="0%" width="10%" height="10%" fill="black" />
+    <!-- Layer 3 -->
+    <mask id="layer-3-mask">
+      <rect y="46%" width="100%" height="8%" transform="translate(58 58) rotate(-45 256 256)" fill="white" />
     </mask>
-    <mask id="light-arrow-mask">
-      <rect x="0%" y="0%" width="100%" height="100%" fill="url(#light-arrow-gradient)" />
-      <circle cx="50%" cy="50%" r="42%" fill="black" />
-      <rect x="0%" y="0%" width="46%" height="100%" fill="black" />
-      <rect x="0%" y="54%" width="100%" height="46%" fill="black" />
-      <rect x="46%" y="-50%" width="8%" height="110%" fill="white" transform="rotate(45 256 256) translate(82 282)" />
-      <rect x="46%" y="50%" width="8%" height="50%" fill="black" />
-      <rect x="90%" y="50%" width="10%" height="10%" fill="black" />
+    <mask id="layer-3-alt-mask">
+      <rect width="100%" height="100%" fill="white" mask="url(#layer-3-mask)" transform="translate(512 0) scale(-1 1) rotate(-90 256 256)" />
+    </mask>
+
+    <!-- Layer 4 -->
+    <mask id="layer-4-mask">
+      <rect y="46%" width="50%" height="8%" fill="white" />
+    </mask>
+    <mask id="layer-4-alt-mask">
+      <rect width="100%" height="100%" fill="white" mask="url(#layer-4-mask)" transform="translate(512 0) scale(-1 1) rotate(-90 256 256)" />
     </mask>
   </defs>
 
-  <g mask="url(#cutoff-mask)">
+  <g mask="url(#outer-crop-mask)">
     <!-- Background -->
     <rect width="100%" height="100%" fill="url(#middle-pattern)" />
 
-    <!-- Crossovers -->
-    <g mask="url(#x-mask)">
-      <rect x="50%" y="0%" width="50%" height="100%" fill="url(#light-pattern)" />
-      <rect x="50%" y="0%" width="50%" height="100%" fill="url(#dark-pattern)" mask="url(#x-gradient-mask)" />
+    <!-- Layers -->
+    <g mask="url(#inner-crop-mask)">
+      <g mask="url(#layer-1-mask)">
+        <rect width="100%" height="100%" fill="url(#light-pattern)" />
+        <rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#layer-1-gradient-mask)" />
+      </g>
+      <g mask="url(#layer-1-alt-mask)">
+        <rect width="100%" height="100%" fill="url(#dark-pattern)" />
+        <rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#layer-1-alt-gradient-mask)" />
+      </g>
+      <rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#layer-2-mask)" />
+      <rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#layer-2-alt-mask)" />
+      <rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#layer-3-mask)" />
+      <rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#layer-3-alt-mask)" />
+      <rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#layer-4-mask)" />
+      <rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#layer-4-alt-mask)" />
     </g>
-    <g mask="url(#y-mask)">
-      <rect x="0%" y="0%" width="100%" height="50%" fill="url(#dark-pattern)" />
-      <rect x="0%" y="0%" width="100%" height="50%" fill="url(#light-pattern)" mask="url(#y-gradient-mask)" />
-    </g>
-
-    <!-- Grids -->
-    <rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#dark-grid-mask)" />
-    <rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#light-grid-mask)" />
-
-    <!-- Arrows -->
-    <rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#dark-arrow-mask)" />
-    <rect width="100%" height="100%" fill="url(#light-pattern)" mask="url(#light-arrow-mask)" />
   </g>
 </svg>