Fix rotation on safari

static/logo-colored.svg

@@ -24,7 +24,7 @@
   </defs>
 
   <mask fill="white" id="mask">
-    <g transform-origin="50 50">
+    <g>
       <circle cx="50" cy="50" r="14" />
       <use href="#ray-a" transform="translate(50 50) rotate(0 0 0)" />
       <use href="#ray-a" transform="translate(50 50) rotate(90 0 0)" />
@@ -37,15 +37,12 @@
       <animateTransform 
         attributeName="transform" 
         type="rotate"
-        values="0;90" 
+        values="0 50 50;90 50 50" 
         dur="6s" 
         repeatCount="indefinite" 
       />
     </g>
   </mask>
 
-  <rect width="100%" height="100%" fill="url(#bg)" mask="url(#mask)">
-    
-  </rect>
-
+  <rect width="100%" height="100%" fill="url(#bg)" mask="url(#mask)" />
 </svg>

static/logo-white.svg

@@ -19,25 +19,24 @@
   </defs>
 
   <mask fill="white" id="mask">
-    <g transform-origin="50% 50%">
-      <circle cx="50" cy="50" r="14" />
-      <use href="#ray-a" transform="translate(50 50) rotate(0 0 0)" />
-      <use href="#ray-a" transform="translate(50 50) rotate(90 0 0)" />
-      <use href="#ray-a" transform="translate(50 50) rotate(180 0 0)" />
-      <use href="#ray-a" transform="translate(50 50) rotate(270 0 0)" />
-      <use href="#ray-b" transform="translate(50 50) rotate(45 0 0)" />
-      <use href="#ray-b" transform="translate(50 50) rotate(135 0 0)" />
-      <use href="#ray-b" transform="translate(50 50) rotate(225 0 0) " />
-      <use href="#ray-b" transform="translate(50 50) rotate(315 0 0)" />
-      <animateTransform 
-        attributeName="transform" 
-        type="rotate"
-        values="0;90" 
-        dur="10s" 
-        repeatCount="indefinite" 
-      />
-    </g>
+    <circle cx="50" cy="50" r="14" />
+    <use href="#ray-a" transform="translate(50 50) rotate(0 0 0)" />
+    <use href="#ray-a" transform="translate(50 50) rotate(90 0 0)" />
+    <use href="#ray-a" transform="translate(50 50) rotate(180 0 0)" />
+    <use href="#ray-a" transform="translate(50 50) rotate(270 0 0)" />
+    <use href="#ray-b" transform="translate(50 50) rotate(45 0 0)" />
+    <use href="#ray-b" transform="translate(50 50) rotate(135 0 0)" />
+    <use href="#ray-b" transform="translate(50 50) rotate(225 0 0) " />
+    <use href="#ray-b" transform="translate(50 50) rotate(315 0 0)" />
   </mask>
 
-  <rect width="100%" height="100%" fill="white" mask="url(#mask)"/>
+  <rect width="100" height="100" fill="white" mask="url(#mask)"> 
+    <animateTransform 
+      attributeName="transform" 
+      type="rotate"
+      values="0 50 50;90 50 50" 
+      dur="10s" 
+      repeatCount="indefinite" 
+    />
+  </rect>
 </svg>