From 63cdeedf03de9deb35a67cda7c5c5ab556efd3af Mon Sep 17 00:00:00 2001
From: Juan Placencia <juan@placencia.uno>
Date: Sun, 20 Jun 2021 17:05:31 -0500
Subject: [PATCH] Better approach to crop edges

---
 logo.svg | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/logo.svg b/logo.svg
index 9e2103f..57c2fe8 100644
--- a/logo.svg
+++ b/logo.svg
@@ -39,7 +39,17 @@
       <stop stop-color="black" offset="100%" />
     </linearGradient>
 
+    <!-- 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" />
+    </mask>
+
     <!-- Grid definitions -->
+    <mask id="middle-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="dark-grid-mask">
       <circle cx="50%" cy="50%" r="46%" fill="none" stroke="white" stroke-width="8%" />
       <rect x="46%" y="70%" width="8%" height="25%" fill="white" transform="rotate(-45 256 256)" />
@@ -50,7 +60,7 @@
       <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" />
-      <path d="M 0 256 V 512 H 256 Q 33 501, 0 256" 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%" />
@@ -62,7 +72,7 @@
       <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" />
-      <path d="M 0 256 V 512 H 256 Q 11 479, 0 256" fill="black" />
+      <rect width="100%" height="100%" color="black" mask="url(#crop-mask)" />
     </mask>
 
     <!-- Arrow definitions -->
@@ -74,7 +84,7 @@
       <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" />
-      <path d="M 0 256 V 512 H 256 Q 11 479, 0 256" fill="black" />
+      <rect width="100%" height="100%" color="black" mask="url(#crop-mask)" />
     </mask>
     <mask id="light-arrow-mask">
       <rect x="56%" y="46%" width="44%" height="8%" fill="url(#light-arrow-gradient-2)" />
@@ -84,12 +94,12 @@
       <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" />
-      <path d="M 0 256 V 512 H 256 Q 33 501, 0 256" 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)" />
+  <rect width="100%" height="100%" fill="url(#middle-pattern)" mask="url(#middle-grid-mask)" />
 
   <!-- Grids -->
   <rect width="100%" height="100%" fill="url(#dark-pattern)" mask="url(#dark-grid-mask)" />