Better clipping

logo.svg

@@ -42,7 +42,7 @@
     <!-- Circular crop mask -->
     <mask id="crop-mask">
       <rect x="0%" y="0%" width="100%" height="100%" fill="white" />
-      <circle cx="50%" cy="50%" r="255" fill="black" />
+      <circle cx="50%" cy="50%" r="50%" fill="black" />
     </mask>
 
     <!-- Grid definitions -->
@@ -51,7 +51,8 @@
       <rect width="100%" height="100%" color="black" mask="url(#crop-mask)" />
     </mask>
     <mask id="dark-grid-mask">
-      <circle cx="50%" cy="50%" r="46%" fill="none" stroke="white" stroke-width="8%" />
+      <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" />
@@ -59,11 +60,10 @@
       <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" />
-      <rect x="96%" y="46%" width="4%" height="4%" fill="black" />
-      <rect width="100%" height="100%" color="black" mask="url(#crop-mask)" />
     </mask>
     <mask id="light-grid-mask">
-      <circle cx="50%" cy="50%" r="46%" fill="none" stroke="white" stroke-width="8%" />
+      <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="46%" y="0%" width="8%" height="54%" fill="white" />
@@ -71,41 +71,39 @@
       <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" />
-      <rect x="50%" y="0%" width="4%" height="4%" fill="black" />
-      <rect width="100%" height="100%" color="black" mask="url(#crop-mask)" />
     </mask>
 
     <!-- Arrow definitions -->
     <mask id="dark-arrow-mask">
+      <rect x="0%" y="0%" width="100%" height="100%" fill="url(#dark-arrow-gradient-1)" />
+      <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="50%" y="0%" width="4%" height="4%" fill="black" />
-      <circle cx="50%" cy="50%" r="46%" fill="none" stroke="url(#dark-arrow-gradient-1)" stroke-width="8%" />
       <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 width="100%" height="100%" color="black" mask="url(#crop-mask)" />
     </mask>
     <mask id="light-arrow-mask">
+      <rect x="0%" y="0%" width="100%" height="100%" fill="url(#light-arrow-gradient-1)" />
+      <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="96%" y="46%" width="4%" height="4%" fill="black" />
-      <circle cx="50%" cy="50%" r="46%" fill="none" stroke="url(#light-arrow-gradient-1)" stroke-width="8%" />
       <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 width="100%" height="100%" color="black" mask="url(#crop-mask)" />
     </mask>
   </defs>
 
-  <!-- Background -->
-  <rect width="100%" height="100%" fill="url(#middle-pattern)" mask="url(#middle-grid-mask)" />
+  <g mask="url(#middle-grid-mask)">
+    <!-- Background -->
+    <rect width="100%" height="100%" fill="url(#middle-pattern)" />
 
-  <!-- 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)" />
+    <!-- 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)" />
+    <!-- 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>