From 64d306e6825bdb3455e21f468445d0a83f41a7e4 Mon Sep 17 00:00:00 2001
From: schmelczerandras <andras@schmelzer.dev>
Date: Mon, 21 Sep 2020 14:57:52 +0200
Subject: [PATCH] Fix rotation on safari

---
 static/logo-colored.svg |  9 +++------
 static/logo-white.svg   | 37 ++++++++++++++++++-------------------
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/static/logo-colored.svg b/static/logo-colored.svg
index ba2f830..96a64bf 100644
--- a/static/logo-colored.svg
+++ b/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>
diff --git a/static/logo-white.svg b/static/logo-white.svg
index bb36e19..503d9ef 100644
--- a/static/logo-white.svg
+++ b/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>