From 2c9a8b8d74da65a04c5fcb23f3a0e6e65a47b04a Mon Sep 17 00:00:00 2001
From: Mehdi Benadel <mehdi.benadel@gmail.com>
Date: Fri, 2 Dec 2022 13:09:27 +0100
Subject: [PATCH] Keeping structure similar between svg files + improving drop
 shadow

---
 logo/icon.svg           | 51 ++++++++++++++++++++++-------------------
 logo/icon_with_text.svg | 51 ++++++++++++++++++++++-------------------
 logo/logo.svg           | 51 ++++++++++++++++++++++-------------------
 logo/logo_animated.svg  |  7 +++---
 logo/wheel_animated.svg |  5 ++--
 usage/offsets.svg       | 51 ++++++++++++++++++++++-------------------
 6 files changed, 118 insertions(+), 98 deletions(-)

diff --git a/logo/icon.svg b/logo/icon.svg
index 99c101e..8113d1a 100644
--- a/logo/icon.svg
+++ b/logo/icon.svg
@@ -60,7 +60,9 @@
       <feComposite operator="in" in2="SourceAlpha" in="shadowOffset"/>
       <feGaussianBlur stdDeviation="1"/>
       <feOffset result="shadowOffset" in="shadowOffset" dx="1" dy="1.2"/>
+
       <feComposite operator="out" in2="SourceGraphic" in="shadowOffset"/>
+      <feComposite operator="over" in2="shadowOffset" in="SourceGraphic"/>
     </filter>
     <filter id="inset_shadow">
       <feFlood flood-color="#0006"/>
@@ -78,30 +80,33 @@
       <feComposite operator="atop" in2="result" in="lightOffset"/>
     </filter>
   </defs>
-  <g id="wheel" filter="url(#inset_shadow)" transform="translate(12.5,12.5)">
-    <g id="red" transform="rotate(0,25,25)">
-      <use id="drop_shape_red" xlink:href="#drop_shape" style="fill:url(#drop_shape_red_gradient)"/>
-      <use id="drop_seam_red" xlink:href="#drop_seam" style="fill:url(#drop_seam_red_gradient)"/>
-    </g>
-    <g id="yellow" transform="rotate(72,25,25)">
-      <use id="drop_shape_yellow" xlink:href="#drop_shape" style="fill:url(#drop_shape_yellow_gradient)"/>
-      <use id="drop_seam_yellow" xlink:href="#drop_seam" style="fill:url(#drop_seam_yellow_gradient)"/>
-    </g>
-    <g id="green" transform="rotate(144,25,25)">
-      <use id="drop_shape_green" xlink:href="#drop_shape" style="fill:url(#drop_shape_green_gradient)"/>
-      <use id="drop_seam_green" xlink:href="#drop_seam" style="fill:url(#drop_seam_green_gradient)"/>
+  <g id="logo" transform="translate(12.5,12.5)">
+    <g id="wheel_filter" filter="url(#inset_shadow)">
+      <g id="wheel">
+        <g id="red" transform="rotate(0,25,25)">
+          <use id="drop_shape_red" xlink:href="#drop_shape" style="fill:url(#drop_shape_red_gradient)"/>
+          <use id="drop_seam_red" xlink:href="#drop_seam" style="fill:url(#drop_seam_red_gradient)"/>
+        </g>
+        <g id="yellow" transform="rotate(72,25,25)">
+          <use id="drop_shape_yellow" xlink:href="#drop_shape" style="fill:url(#drop_shape_yellow_gradient)"/>
+          <use id="drop_seam_yellow" xlink:href="#drop_seam" style="fill:url(#drop_seam_yellow_gradient)"/>
+        </g>
+        <g id="green" transform="rotate(144,25,25)">
+          <use id="drop_shape_green" xlink:href="#drop_shape" style="fill:url(#drop_shape_green_gradient)"/>
+          <use id="drop_seam_green" xlink:href="#drop_seam" style="fill:url(#drop_seam_green_gradient)"/>
+        </g>
+        <g id="blue" transform="rotate(216,25,25)">
+          <use id="drop_shape_blue" xlink:href="#drop_shape" style="fill:url(#drop_shape_blue_gradient)"/>
+          <use id="drop_seam_blue" xlink:href="#drop_seam" style="fill:url(#drop_seam_blue_gradient)"/>
+        </g>
+        <g id="purple" transform="rotate(288,25,25)">
+          <use id="drop_shape_purple" xlink:href="#drop_shape" style="fill:url(#drop_shape_purple_gradient)"/>
+          <use id="drop_seam_purple" xlink:href="#drop_seam" style="fill:url(#drop_seam_purple_gradient)"/>
+        </g>
+      </g>
     </g>
-    <g id="blue" transform="rotate(216,25,25)">
-      <use id="drop_shape_blue" xlink:href="#drop_shape" style="fill:url(#drop_shape_blue_gradient)"/>
-      <use id="drop_seam_blue" xlink:href="#drop_seam" style="fill:url(#drop_seam_blue_gradient)"/>
+    <g id="center_logo">
+      <use xlink:href="#center_logo_shape" id="center_logo_shape_shadow" style="fill:#ffffff;filter:url(#outset_shadow)"/>
     </g>
-    <g id="purple" transform="rotate(288,25,25)">
-      <use id="drop_shape_purple" xlink:href="#drop_shape" style="fill:url(#drop_shape_purple_gradient)"/>
-      <use id="drop_seam_purple" xlink:href="#drop_seam" style="fill:url(#drop_seam_purple_gradient)"/>
-    </g>
-  </g>
-  <g id="center_logo" style="opacity:1" transform="translate(12.5,12.5)">
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_shadow" style="fill:#000000;filter:url(#outset_shadow)"/>
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_fill" style="fill:#ffffff"/>
   </g>
 </svg>
diff --git a/logo/icon_with_text.svg b/logo/icon_with_text.svg
index 1948d4c..603b8ec 100644
--- a/logo/icon_with_text.svg
+++ b/logo/icon_with_text.svg
@@ -60,7 +60,9 @@
       <feComposite operator="in" in2="SourceAlpha" in="shadowOffset"/>
       <feGaussianBlur stdDeviation="1"/>
       <feOffset result="shadowOffset" in="shadowOffset" dx="1" dy="1.2"/>
+
       <feComposite operator="out" in2="SourceGraphic" in="shadowOffset"/>
+      <feComposite operator="over" in2="shadowOffset" in="SourceGraphic"/>
     </filter>
     <filter id="inset_shadow">
       <feFlood flood-color="#0006"/>
@@ -78,31 +80,34 @@
       <feComposite operator="atop" in2="result" in="lightOffset"/>
     </filter>
   </defs>
-  <g id="wheel" filter="url(#inset_shadow)" transform="translate(12.5,12.5)">
-    <g id="red" transform="rotate(0,25,25)">
-      <use id="drop_shape_red" xlink:href="#drop_shape" style="fill:url(#drop_shape_red_gradient)"/>
-      <use id="drop_seam_red" xlink:href="#drop_seam" style="fill:url(#drop_seam_red_gradient)"/>
-    </g>
-    <g id="yellow" transform="rotate(72,25,25)">
-      <use id="drop_shape_yellow" xlink:href="#drop_shape" style="fill:url(#drop_shape_yellow_gradient)"/>
-      <use id="drop_seam_yellow" xlink:href="#drop_seam" style="fill:url(#drop_seam_yellow_gradient)"/>
-    </g>
-    <g id="green" transform="rotate(144,25,25)">
-      <use id="drop_shape_green" xlink:href="#drop_shape" style="fill:url(#drop_shape_green_gradient)"/>
-      <use id="drop_seam_green" xlink:href="#drop_seam" style="fill:url(#drop_seam_green_gradient)"/>
+  <g id="logo" transform="translate(12.5,12.5)">
+    <g id="wheel_filter" filter="url(#inset_shadow)">
+      <g id="wheel">
+        <g id="red" transform="rotate(0,25,25)">
+          <use id="drop_shape_red" xlink:href="#drop_shape" style="fill:url(#drop_shape_red_gradient)"/>
+          <use id="drop_seam_red" xlink:href="#drop_seam" style="fill:url(#drop_seam_red_gradient)"/>
+        </g>
+        <g id="yellow" transform="rotate(72,25,25)">
+          <use id="drop_shape_yellow" xlink:href="#drop_shape" style="fill:url(#drop_shape_yellow_gradient)"/>
+          <use id="drop_seam_yellow" xlink:href="#drop_seam" style="fill:url(#drop_seam_yellow_gradient)"/>
+        </g>
+        <g id="green" transform="rotate(144,25,25)">
+          <use id="drop_shape_green" xlink:href="#drop_shape" style="fill:url(#drop_shape_green_gradient)"/>
+          <use id="drop_seam_green" xlink:href="#drop_seam" style="fill:url(#drop_seam_green_gradient)"/>
+        </g>
+        <g id="blue" transform="rotate(216,25,25)">
+          <use id="drop_shape_blue" xlink:href="#drop_shape" style="fill:url(#drop_shape_blue_gradient)"/>
+          <use id="drop_seam_blue" xlink:href="#drop_seam" style="fill:url(#drop_seam_blue_gradient)"/>
+        </g>
+        <g id="purple" transform="rotate(288,25,25)">
+          <use id="drop_shape_purple" xlink:href="#drop_shape" style="fill:url(#drop_shape_purple_gradient)"/>
+          <use id="drop_seam_purple" xlink:href="#drop_seam" style="fill:url(#drop_seam_purple_gradient)"/>
+        </g>
+      </g>
     </g>
-    <g id="blue" transform="rotate(216,25,25)">
-      <use id="drop_shape_blue" xlink:href="#drop_shape" style="fill:url(#drop_shape_blue_gradient)"/>
-      <use id="drop_seam_blue" xlink:href="#drop_seam" style="fill:url(#drop_seam_blue_gradient)"/>
+    <g id="center_logo">
+      <use xlink:href="#center_logo_shape" id="center_logo_shape_shadow" style="fill:#ffffff;filter:url(#outset_shadow)"/>
     </g>
-    <g id="purple" transform="rotate(288,25,25)">
-      <use id="drop_shape_purple" xlink:href="#drop_shape" style="fill:url(#drop_shape_purple_gradient)"/>
-      <use id="drop_seam_purple" xlink:href="#drop_seam" style="fill:url(#drop_seam_purple_gradient)"/>
-    </g>
-  </g>
-  <g id="center_logo" style="opacity:1" transform="translate(12.5,12.5)">
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_shadow" style="fill:#000000;filter:url(#outset_shadow)"/>
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_fill" style="fill:#ffffff"/>
   </g>
   <path id="brand_name"
         d="M 205.6543 16.013672 C 204.26541 16.013672 202.94727 16.292101 201.69727 16.847656 C 200.44727 17.403212 199.42931 18.236545 198.64648 19.347656 C 197.86366 20.458767 197.47266 21.847005 197.47266 23.513672 L 197.47266 27.529297 L 192.77539 27.529297 L 192.77539 31.316406 L 197.47266 31.316406 L 197.47266 56.621094 L 201.94336 56.621094 L 201.94336 31.316406 L 208.45898 31.316406 L 208.45898 27.529297 L 201.94336 27.529297 L 201.94336 24.574219 C 201.94336 23.134825 202.26426 22.043778 202.9082 21.298828 C 203.56477 20.553879 204.6321 20.181641 206.10938 20.181641 C 206.75331 20.181641 207.2707 20.237926 207.66211 20.351562 C 208.06615 20.465199 208.3821 20.559008 208.60938 20.634766 L 209.89648 16.771484 C 209.55558 16.619969 209.03819 16.456065 208.34375 16.279297 C 207.64931 16.102529 206.75278 16.013672 205.6543 16.013672 z M 114.02539 16.621094 C 113.15418 16.621094 112.4028 16.916331 111.77148 17.509766 C 111.1528 18.1032 110.84375 18.817057 110.84375 19.650391 C 110.84375 20.483724 111.1528 21.197581 111.77148 21.791016 C 112.4028 22.38445 113.15418 22.681641 114.02539 22.681641 C 114.8966 22.681641 115.64303 22.38445 116.26172 21.791016 C 116.89303 21.197581 117.20898 20.483724 117.20898 19.650391 C 117.20898 18.817057 116.89303 18.1032 116.26172 17.509766 C 115.64303 16.916331 114.8966 16.621094 114.02539 16.621094 z M 182.89844 17.832031 L 182.89844 56.621094 L 187.36914 56.621094 L 187.36914 17.832031 L 182.89844 17.832031 z M 264.41406 17.832031 L 264.41406 32.150391 L 264.03516 32.150391 C 263.70687 31.64534 263.24578 31.001578 262.65234 30.21875 C 262.07154 29.423295 261.22635 28.716343 260.11523 28.097656 C 259.01675 27.466343 257.52089 27.150391 255.62695 27.150391 C 253.17746 27.150391 251.01712 27.763534 249.14844 28.988281 C 247.27975 30.213029 245.82142 31.947838 244.77344 34.195312 C 243.72546 36.442787 243.20312 39.094835 243.20312 42.150391 C 243.20313 45.231199 243.72546 47.902008 244.77344 50.162109 C 245.82142 52.409584 247.2748 54.151298 249.13086 55.388672 C 250.98692 56.613419 253.12654 57.226562 255.55078 57.226562 C 257.41947 57.226563 258.91533 56.917515 260.03906 56.298828 C 261.1628 55.667515 262.02871 54.953658 262.63477 54.158203 C 263.24083 53.350122 263.70687 52.680694 264.03516 52.150391 L 264.56641 52.150391 L 264.56641 56.621094 L 268.88477 56.621094 L 268.88477 17.832031 L 264.41406 17.832031 z M 92.511719 27.150391 C 90.617779 27.150391 89.115017 27.466343 88.003906 28.097656 C 86.905421 28.716343 86.058278 29.423295 85.464844 30.21875 C 84.884036 31.001578 84.429845 31.64534 84.101562 32.150391 L 83.572266 32.150391 L 83.572266 27.529297 L 79.253906 27.529297 L 79.253906 67.529297 L 83.722656 67.529297 L 83.722656 52.150391 L 84.101562 52.150391 C 84.429845 52.680694 84.897846 53.350122 85.503906 54.158203 C 86.109967 54.953658 86.973919 55.667515 88.097656 56.298828 C 89.221394 56.917515 90.717251 57.226563 92.585938 57.226562 C 95.01018 57.226562 97.151752 56.613419 99.007812 55.388672 C 100.86387 54.151298 102.3153 52.409584 103.36328 50.162109 C 104.41126 47.902008 104.93555 45.231199 104.93555 42.150391 C 104.93555 39.094835 104.41126 36.442787 103.36328 34.195312 C 102.3153 31.947838 100.85697 30.213029 98.988281 28.988281 C 97.119594 27.763534 94.961214 27.150391 92.511719 27.150391 z M 163.59961 27.150391 C 160.97335 27.150391 158.67673 27.794152 156.70703 29.082031 C 154.74996 30.357284 153.22153 32.138475 152.12305 34.423828 C 151.03719 36.696555 150.49414 39.322936 150.49414 42.302734 C 150.49414 45.282532 151.03719 47.895103 152.12305 50.142578 C 153.22153 52.377427 154.78058 54.121094 156.80078 55.371094 C 158.83361 56.608467 161.25166 57.226562 164.05469 57.226562 C 167.00923 57.226563 169.50923 56.550229 171.55469 55.199219 C 173.60014 53.848209 174.96467 52.073923 175.64648 49.876953 L 171.32812 48.666016 C 170.75994 50.181167 169.84466 51.316643 168.58203 52.074219 C 167.31941 52.831794 165.80974 53.210938 164.05469 53.210938 C 161.42842 53.210938 159.2819 52.384509 157.61523 50.730469 C 155.96119 49.076428 155.08343 46.695904 154.98242 43.589844 L 176.09961 43.589844 L 176.09961 41.695312 C 176.09961 38.980666 175.74118 36.695904 175.02148 34.839844 C 174.30179 32.983783 173.33517 31.494831 172.12305 30.371094 C 170.91093 29.23473 169.56516 28.413254 168.08789 27.908203 C 166.61062 27.403153 165.11476 27.150391 163.59961 27.150391 z M 225.26758 27.150391 C 222.64132 27.150391 220.34274 27.794152 218.37305 29.082031 C 216.41598 30.357284 214.88755 32.138475 213.78906 34.423828 C 212.7032 36.696555 212.16016 39.322936 212.16016 42.302734 C 212.16016 45.282532 212.7032 47.895103 213.78906 50.142578 C 214.88755 52.377427 216.44659 54.121094 218.4668 55.371094 C 220.49963 56.608467 222.91767 57.226562 225.7207 57.226562 C 228.67525 57.226563 231.17525 56.550229 233.2207 55.199219 C 235.26616 53.848209 236.63068 52.073923 237.3125 49.876953 L 232.99414 48.666016 C 232.42596 50.181167 231.51067 51.316643 230.24805 52.074219 C 228.98542 52.831794 227.47575 53.210938 225.7207 53.210938 C 223.09444 53.210938 220.94792 52.384509 219.28125 50.730469 C 217.62721 49.076428 216.74945 46.695904 216.64844 43.589844 L 237.76758 43.589844 L 237.76758 41.695312 C 237.76758 38.980666 237.4072 36.695904 236.6875 34.839844 C 235.9678 32.983783 235.00118 31.494831 233.78906 30.371094 C 232.57694 29.23473 231.23313 28.413254 229.75586 27.908203 C 228.27859 27.403153 226.78273 27.150391 225.26758 27.150391 z M 111.75391 27.529297 L 111.75391 56.621094 L 116.22266 56.621094 L 116.22266 27.529297 L 111.75391 27.529297 z M 122.53906 27.529297 L 131.78125 42.074219 L 122.53906 56.621094 L 127.69141 56.621094 L 134.66016 45.332031 L 141.63086 56.621094 L 146.78125 56.621094 L 137.38867 42.074219 L 146.78125 27.529297 L 141.63086 27.529297 L 134.66016 39.423828 L 127.69141 27.529297 L 122.53906 27.529297 z M 91.980469 31.166016 C 93.874408 31.166016 95.447266 31.650825 96.697266 32.623047 C 97.959892 33.582643 98.900844 34.890882 99.519531 36.544922 C 100.15084 38.186336 100.46484 40.028764 100.46484 42.074219 C 100.46484 44.144926 100.14394 46.026831 99.5 47.71875 C 98.868687 49.398043 97.920829 50.7369 96.658203 51.734375 C 95.408203 52.719223 93.849156 53.210938 91.980469 53.210938 C 89.291075 53.210938 87.226503 52.181128 85.787109 50.123047 C 84.360342 48.05234 83.646484 45.369673 83.646484 42.074219 C 83.646484 38.816643 84.35539 36.18531 85.769531 34.177734 C 87.183673 32.170159 89.253196 31.166016 91.980469 31.166016 z M 163.59961 31.166016 C 166.02385 31.166016 167.95709 31.980587 169.39648 33.609375 C 170.83588 35.225537 171.55469 37.264441 171.55469 39.726562 L 154.98242 39.726562 C 155.08343 38.224037 155.49319 36.821989 156.21289 35.521484 C 156.93259 34.208353 157.91797 33.15483 159.16797 32.359375 C 160.41797 31.56392 161.89506 31.166016 163.59961 31.166016 z M 225.26758 31.166016 C 227.69182 31.166016 229.62311 31.980587 231.0625 33.609375 C 232.50189 35.225537 233.2207 37.264441 233.2207 39.726562 L 216.64844 39.726562 C 216.74945 38.224037 217.16116 36.821989 217.88086 35.521484 C 218.60056 34.208353 219.58398 33.15483 220.83398 32.359375 C 222.08398 31.56392 223.56303 31.166016 225.26758 31.166016 z M 256.15625 31.166016 C 258.88352 31.166016 260.955 32.170159 262.36914 34.177734 C 263.78328 36.18531 264.49023 38.816643 264.49023 42.074219 C 264.49023 45.369673 263.77143 48.05234 262.33203 50.123047 C 260.90526 52.181128 258.84564 53.210938 256.15625 53.210938 C 254.28756 53.210938 252.72161 52.719223 251.45898 51.734375 C 250.20898 50.7369 249.26308 49.398043 248.61914 47.71875 C 247.98783 46.026831 247.67188 44.144926 247.67188 42.074219 C 247.67188 40.028764 247.98092 38.186336 248.59961 36.544922 C 249.23092 34.890882 250.17188 33.582643 251.42188 32.623047 C 252.6845 31.650825 254.26231 31.166016 256.15625 31.166016 z "
diff --git a/logo/logo.svg b/logo/logo.svg
index 873f792..35bdaad 100644
--- a/logo/logo.svg
+++ b/logo/logo.svg
@@ -60,7 +60,9 @@
       <feComposite operator="in" in2="SourceAlpha" in="shadowOffset"/>
       <feGaussianBlur stdDeviation="1"/>
       <feOffset result="shadowOffset" in="shadowOffset" dx="1" dy="1.2"/>
+
       <feComposite operator="out" in2="SourceGraphic" in="shadowOffset"/>
+      <feComposite operator="over" in2="shadowOffset" in="SourceGraphic"/>
     </filter>
     <filter id="inset_shadow">
       <feFlood flood-color="#0006"/>
@@ -78,30 +80,31 @@
       <feComposite operator="atop" in2="result" in="lightOffset"/>
     </filter>
   </defs>
-  <g id="wheel" filter="url(#inset_shadow)">
-    <g id="red" transform="rotate(0,25,25)">
-      <use id="drop_shape_red" xlink:href="#drop_shape" style="fill:url(#drop_shape_red_gradient)"/>
-      <use id="drop_seam_red" xlink:href="#drop_seam" style="fill:url(#drop_seam_red_gradient)"/>
-    </g>
-    <g id="yellow" transform="rotate(72,25,25)">
-      <use id="drop_shape_yellow" xlink:href="#drop_shape" style="fill:url(#drop_shape_yellow_gradient)"/>
-      <use id="drop_seam_yellow" xlink:href="#drop_seam" style="fill:url(#drop_seam_yellow_gradient)"/>
-    </g>
-    <g id="green" transform="rotate(144,25,25)">
-      <use id="drop_shape_green" xlink:href="#drop_shape" style="fill:url(#drop_shape_green_gradient)"/>
-      <use id="drop_seam_green" xlink:href="#drop_seam" style="fill:url(#drop_seam_green_gradient)"/>
+    <g id="wheel_filter" filter="url(#inset_shadow)">
+      <g id="wheel">
+        <g id="red" transform="rotate(0,25,25)">
+          <use id="drop_shape_red" xlink:href="#drop_shape" style="fill:url(#drop_shape_red_gradient)"/>
+          <use id="drop_seam_red" xlink:href="#drop_seam" style="fill:url(#drop_seam_red_gradient)"/>
+        </g>
+        <g id="yellow" transform="rotate(72,25,25)">
+          <use id="drop_shape_yellow" xlink:href="#drop_shape" style="fill:url(#drop_shape_yellow_gradient)"/>
+          <use id="drop_seam_yellow" xlink:href="#drop_seam" style="fill:url(#drop_seam_yellow_gradient)"/>
+        </g>
+        <g id="green" transform="rotate(144,25,25)">
+          <use id="drop_shape_green" xlink:href="#drop_shape" style="fill:url(#drop_shape_green_gradient)"/>
+          <use id="drop_seam_green" xlink:href="#drop_seam" style="fill:url(#drop_seam_green_gradient)"/>
+        </g>
+        <g id="blue" transform="rotate(216,25,25)">
+          <use id="drop_shape_blue" xlink:href="#drop_shape" style="fill:url(#drop_shape_blue_gradient)"/>
+          <use id="drop_seam_blue" xlink:href="#drop_seam" style="fill:url(#drop_seam_blue_gradient)"/>
+        </g>
+        <g id="purple" transform="rotate(288,25,25)">
+          <use id="drop_shape_purple" xlink:href="#drop_shape" style="fill:url(#drop_shape_purple_gradient)"/>
+          <use id="drop_seam_purple" xlink:href="#drop_seam" style="fill:url(#drop_seam_purple_gradient)"/>
+        </g>
+      </g>
     </g>
-    <g id="blue" transform="rotate(216,25,25)">
-      <use id="drop_shape_blue" xlink:href="#drop_shape" style="fill:url(#drop_shape_blue_gradient)"/>
-      <use id="drop_seam_blue" xlink:href="#drop_seam" style="fill:url(#drop_seam_blue_gradient)"/>
-    </g>
-    <g id="purple" transform="rotate(288,25,25)">
-      <use id="drop_shape_purple" xlink:href="#drop_shape" style="fill:url(#drop_shape_purple_gradient)"/>
-      <use id="drop_seam_purple" xlink:href="#drop_seam" style="fill:url(#drop_seam_purple_gradient)"/>
-    </g>
-  </g>
-  <g id="center_logo" style="opacity:1">
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_shadow" style="fill:#000000;filter:url(#outset_shadow)"/>
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_fill" style="fill:#ffffff"/>
+  <g id="center_logo">
+    <use id="center_logo_shape_shadow" xlink:href="#center_logo_shape" style="fill:#ffffff;filter:url(#outset_shadow)"/>
   </g>
 </svg>
diff --git a/logo/logo_animated.svg b/logo/logo_animated.svg
index 454b732..ff7c597 100644
--- a/logo/logo_animated.svg
+++ b/logo/logo_animated.svg
@@ -60,7 +60,9 @@
       <feComposite operator="in" in2="SourceAlpha" in="shadowOffset"/>
       <feGaussianBlur stdDeviation="1"/>
       <feOffset result="shadowOffset" in="shadowOffset" dx="1" dy="1.2"/>
+
       <feComposite operator="out" in2="SourceGraphic" in="shadowOffset"/>
+      <feComposite operator="over" in2="shadowOffset" in="SourceGraphic"/>
     </filter>
     <filter id="inset_shadow">
       <feFlood flood-color="#0006"/>
@@ -103,8 +105,7 @@
       <animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 25 25; 360 25 25" dur="2s" repeatCount="indefinite" />
     </g>
   </g>
-  <g id="center_logo" style="opacity:1">
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_shadow" style="fill:#000000;filter:url(#outset_shadow)"/>
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_fill" style="fill:#ffffff"/>
+  <g id="center_logo">
+    <use id="center_logo_shape_shadow" xlink:href="#center_logo_shape" style="fill:#ffffff;filter:url(#outset_shadow)"/>
   </g>
 </svg>
diff --git a/logo/wheel_animated.svg b/logo/wheel_animated.svg
index 5eb6f8a..599ea7b 100644
--- a/logo/wheel_animated.svg
+++ b/logo/wheel_animated.svg
@@ -60,7 +60,9 @@
       <feComposite operator="in" in2="SourceAlpha" in="shadowOffset"/>
       <feGaussianBlur stdDeviation="1"/>
       <feOffset result="shadowOffset" in="shadowOffset" dx="1" dy="1.2"/>
+
       <feComposite operator="out" in2="SourceGraphic" in="shadowOffset"/>
+      <feComposite operator="over" in2="shadowOffset" in="SourceGraphic"/>
     </filter>
     <filter id="inset_shadow">
       <feFlood flood-color="#0006"/>
@@ -104,7 +106,6 @@
     </g>
   </g>
   <g id="center_logo">
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_shadow" style="fill:#000000;filter:url(#outset_shadow)"/>
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_fill" style="fill:#ffffff"/>
+    <use xlink:href="#center_logo_shape" id="center_logo_shape_shadow" style="fill:#ffffff;filter:url(#outset_shadow)"/>
   </g>
 </svg>
diff --git a/usage/offsets.svg b/usage/offsets.svg
index 8e869d5..2b14e3b 100644
--- a/usage/offsets.svg
+++ b/usage/offsets.svg
@@ -60,7 +60,9 @@
       <feComposite operator="in" in2="SourceAlpha" in="shadowOffset"/>
       <feGaussianBlur stdDeviation="1"/>
       <feOffset result="shadowOffset" in="shadowOffset" dx="1" dy="1.2"/>
+
       <feComposite operator="out" in2="SourceGraphic" in="shadowOffset"/>
+      <feComposite operator="over" in2="shadowOffset" in="SourceGraphic"/>
     </filter>
     <filter id="inset_shadow">
       <feFlood flood-color="#0006"/>
@@ -78,31 +80,34 @@
       <feComposite operator="atop" in2="result" in="lightOffset"/>
     </filter>
   </defs>
-  <g id="wheel" filter="url(#inset_shadow)" transform="translate(50,50) scale(4)">
-    <g id="red" transform="rotate(0,25,25)">
-      <use id="drop_shape_red" xlink:href="#drop_shape" style="fill:url(#drop_shape_red_gradient)"/>
-      <use id="drop_seam_red" xlink:href="#drop_seam" style="fill:url(#drop_seam_red_gradient)"/>
-    </g>
-    <g id="yellow" transform="rotate(72,25,25)">
-      <use id="drop_shape_yellow" xlink:href="#drop_shape" style="fill:url(#drop_shape_yellow_gradient)"/>
-      <use id="drop_seam_yellow" xlink:href="#drop_seam" style="fill:url(#drop_seam_yellow_gradient)"/>
-    </g>
-    <g id="green" transform="rotate(144,25,25)">
-      <use id="drop_shape_green" xlink:href="#drop_shape" style="fill:url(#drop_shape_green_gradient)"/>
-      <use id="drop_seam_green" xlink:href="#drop_seam" style="fill:url(#drop_seam_green_gradient)"/>
+  <g id="logo" transform="translate(50,50) scale(4)">
+    <g id="wheel_filter" filter="url(#inset_shadow)">
+      <g id="wheel">
+        <g id="red" transform="rotate(0,25,25)">
+          <use id="drop_shape_red" xlink:href="#drop_shape" style="fill:url(#drop_shape_red_gradient)"/>
+          <use id="drop_seam_red" xlink:href="#drop_seam" style="fill:url(#drop_seam_red_gradient)"/>
+        </g>
+        <g id="yellow" transform="rotate(72,25,25)">
+          <use id="drop_shape_yellow" xlink:href="#drop_shape" style="fill:url(#drop_shape_yellow_gradient)"/>
+          <use id="drop_seam_yellow" xlink:href="#drop_seam" style="fill:url(#drop_seam_yellow_gradient)"/>
+        </g>
+        <g id="green" transform="rotate(144,25,25)">
+          <use id="drop_shape_green" xlink:href="#drop_shape" style="fill:url(#drop_shape_green_gradient)"/>
+          <use id="drop_seam_green" xlink:href="#drop_seam" style="fill:url(#drop_seam_green_gradient)"/>
+        </g>
+        <g id="blue" transform="rotate(216,25,25)">
+          <use id="drop_shape_blue" xlink:href="#drop_shape" style="fill:url(#drop_shape_blue_gradient)"/>
+          <use id="drop_seam_blue" xlink:href="#drop_seam" style="fill:url(#drop_seam_blue_gradient)"/>
+        </g>
+        <g id="purple" transform="rotate(288,25,25)">
+          <use id="drop_shape_purple" xlink:href="#drop_shape" style="fill:url(#drop_shape_purple_gradient)"/>
+          <use id="drop_seam_purple" xlink:href="#drop_seam" style="fill:url(#drop_seam_purple_gradient)"/>
+        </g>
+      </g>
     </g>
-    <g id="blue" transform="rotate(216,25,25)">
-      <use id="drop_shape_blue" xlink:href="#drop_shape" style="fill:url(#drop_shape_blue_gradient)"/>
-      <use id="drop_seam_blue" xlink:href="#drop_seam" style="fill:url(#drop_seam_blue_gradient)"/>
+    <g id="center_logo">
+      <use xlink:href="#center_logo_shape" id="center_logo_shape_shadow" style="fill:#ffffff;filter:url(#outset_shadow)"/>
     </g>
-    <g id="purple" transform="rotate(288,25,25)">
-      <use id="drop_shape_purple" xlink:href="#drop_shape" style="fill:url(#drop_shape_purple_gradient)"/>
-      <use id="drop_seam_purple" xlink:href="#drop_seam" style="fill:url(#drop_seam_purple_gradient)"/>
-    </g>
-  </g>
-  <g id="center_logo" style="opacity:1" transform="translate(50,50) scale(4)">
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_shadow" style="fill:#000000;filter:url(#outset_shadow)"/>
-    <use xlink:href="#center_logo_shape" id="center_logo_shape_fill" style="fill:#ffffff"/>
   </g>
   <rect
      ry="14.026531"