More better clipping

logo.svg

@@ -22,21 +22,21 @@
     </pattern>
 
     <!-- Gradients for arrow -->
-    <linearGradient id="dark-arrow-gradient-1" x1="0" x2="1" y1="0" y2="1">
+    <linearGradient id="dark-arrow-gradient" x1="0" x2="1" y1="0" y2="1">
       <stop stop-color="white" offset="41%" />
       <stop stop-color="black" offset="49.9%" />
     </linearGradient>
-    <linearGradient id="dark-arrow-gradient-2" x1="0" x2="0" y1="0" y2="1">
-      <stop stop-color="white" offset="19%" />
-      <stop stop-color="black" offset="100%" />
-    </linearGradient>
-    <linearGradient id="light-arrow-gradient-1" x1="1" x2="0" y1="1" y2="0">
+    <linearGradient id="light-arrow-gradient" x1="1" x2="0" y1="1" y2="0">
       <stop stop-color="white" offset="41%" />
       <stop stop-color="black" offset="49.9%" />
     </linearGradient>
-    <linearGradient id="light-arrow-gradient-2" x1="1" x2="0" y1="0" y2="0">
-      <stop stop-color="white" offset="19%" />
-      <stop stop-color="black" offset="100%" />
+    <linearGradient id="x-gradient" x1="0" x2="1" y1="0" y2="0">
+      <stop stop-color="white" offset="15%" />
+      <stop stop-color="black" offset="80%" />
+    </linearGradient>
+    <linearGradient id="y-gradient" x1="0" x2="0" y1="1" y2="0">
+      <stop stop-color="white" offset="15%" />
+      <stop stop-color="black" offset="80%" />
     </linearGradient>
 
     <!-- Circular crop mask -->
@@ -46,16 +46,35 @@
     </mask>
 
     <!-- Grid definitions -->
-    <mask id="middle-grid-mask">
+    <mask id="grid-mask">
       <rect x="0%" y="0%" width="100%" height="100%" fill="white" />
       <rect width="100%" height="100%" color="black" mask="url(#crop-mask)" />
     </mask>
+    <mask id="x-grid-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" />
+      <circle cx="50%" cy="50%" r="5.656854249%" fill="black" />
+    </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>
+    <mask id="y-grid-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" />
+    </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>
     <mask id="dark-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="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="50%" y="46%" width="50%" height="8%" fill="white" />
       <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" />
@@ -66,7 +85,6 @@
       <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="46%" y="0%" width="8%" height="54%" fill="white" />
       <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" />
@@ -75,29 +93,39 @@
 
     <!-- Arrow definitions -->
     <mask id="dark-arrow-mask">
-      <rect x="0%" y="0%" width="100%" height="100%" fill="url(#dark-arrow-gradient-1)" />
+      <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="46%" y="0%" width="8%" height="44%" fill="url(#dark-arrow-gradient-2)" />
       <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" />
     </mask>
     <mask id="light-arrow-mask">
-      <rect x="0%" y="0%" width="100%" height="100%" fill="url(#light-arrow-gradient-1)" />
+      <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="56%" y="46%" width="44%" height="8%" fill="url(#light-arrow-gradient-2)" />
       <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>
   </defs>
 
-  <g mask="url(#middle-grid-mask)">
+  <g mask="url(#grid-mask)">
     <!-- Background -->
     <rect width="100%" height="100%" fill="url(#middle-pattern)" />
 
+    <!-- Gradient crossovers -->
+    <g mask="url(#x-grid-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)" />
+    </g>
+    <g mask="url(#y-grid-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)" />