From f519ba33d0e324c69ab6563b5e4975d836ac1fbe Mon Sep 17 00:00:00 2001
From: Victor Algaze <valgaze@gmail.com>
Date: Mon, 20 May 2024 03:21:28 -0700
Subject: [PATCH] add hw acceleration for safari

---
 docs/public/sb_logo.svg | 35 +++++++++++++++--------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/docs/public/sb_logo.svg b/docs/public/sb_logo.svg
index 44fe502..888fa43 100644
--- a/docs/public/sb_logo.svg
+++ b/docs/public/sb_logo.svg
@@ -1,52 +1,47 @@
 <svg width="32769" height="23570" viewBox="0 0 32769 23570" fill="none" xmlns="http://www.w3.org/2000/svg" id="cute-svg">
   <style>
-    /* Initial state */
-    #left-eye {
-      transform-origin: center;
+ #left-eye {
+      transform-origin: center center;
       transform-box: view-box;
       animation: look-around-left-animation 4s infinite;
+      will-change: transform;
     }
 
     #right-eye {
-      transform-origin: center;
+      transform-origin: center center;
       transform-box: view-box;
       animation: look-around-right-animation 4s infinite;
+      will-change: transform;
     }
 
     @keyframes look-around-left-animation {
       0%, 100% {
-        transform: translateX(0) translateY(0);
+        transform: translateX(0) translateY(0) translateZ(0);
       }
       25% {
-        transform: translateX(15%) translateY(-5%);
+        transform: translateX(15%) translateY(-5%) translateZ(0);
       }
       50% {
-        transform: translateX(-5%) translateY(5%);
+        transform: translateX(-5%) translateY(5%) translateZ(0);
       }
-       75% {
-        transform: translateX(18%) translateY(5%);
+      75% {
+        transform: translateX(18%) translateY(5%) translateZ(0);
       }
-      
     }
 
     @keyframes look-around-right-animation {
       0%, 100% {
-        transform: translateX(0) translateY(0);
+        transform: translateX(0) translateY(0) translateZ(0);
       }
       25% {
-        transform: translateX(5%) translateY(-5%);
+        transform: translateX(5%) translateY(-5%) translateZ(0);
       }
       50% {
-        transform: translateX(-15%) translateY(5%);
+        transform: translateX(-15%) translateY(5%) translateZ(0);
       }
-       75% {
-        transform: translateX(5%) translateY(5%);
+      75% {
+        transform: translateX(5%) translateY(5%) translateZ(0);
       }
-
-
-    html.dark #cute-svg path,
-    html.dark #cute-svg circle {
-      fill: white;
     }
   </style>