From bdc40a8790eb01b694f6cc2bb9e9314a0d6f0576 Mon Sep 17 00:00:00 2001
From: Victor Algaze <valgaze@gmail.com>
Date: Mon, 20 May 2024 03:26:40 -0700
Subject: [PATCH] add animation tweaks

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

diff --git a/docs/public/sb_logo.svg b/docs/public/sb_logo.svg
index 888fa43..0c04c04 100644
--- a/docs/public/sb_logo.svg
+++ b/docs/public/sb_logo.svg
@@ -1,50 +1,52 @@
 <svg width="32769" height="23570" viewBox="0 0 32769 23570" fill="none" xmlns="http://www.w3.org/2000/svg" id="cute-svg">
   <style>
- #left-eye {
-      transform-origin: center center;
-      transform-box: view-box;
+    #left-eye, #right-eye {
+      transform-origin: center;
+      animation-timing-function: ease-in-out;
+    }
+
+    #left-eye {
       animation: look-around-left-animation 4s infinite;
       will-change: transform;
     }
 
     #right-eye {
-      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) translateZ(0);
+        transform: translate(0, 0) translateZ(0);
       }
       25% {
-        transform: translateX(15%) translateY(-5%) translateZ(0);
+        transform: translate(15%, -5%) translateZ(0);
       }
       50% {
-        transform: translateX(-5%) translateY(5%) translateZ(0);
+        transform: translate(-5%, 5%) translateZ(0);
       }
       75% {
-        transform: translateX(18%) translateY(5%) translateZ(0);
+        transform: translate(18%, 5%) translateZ(0);
       }
     }
 
     @keyframes look-around-right-animation {
       0%, 100% {
-        transform: translateX(0) translateY(0) translateZ(0);
+        transform: translate(0, 0) translateZ(0);
       }
       25% {
-        transform: translateX(5%) translateY(-5%) translateZ(0);
+        transform: translate(5%, -5%) translateZ(0);
       }
       50% {
-        transform: translateX(-15%) translateY(5%) translateZ(0);
+        transform: translate(-15%, 5%) translateZ(0);
       }
       75% {
-        transform: translateX(5%) translateY(5%) translateZ(0);
+        transform: translate(5%, 5%) translateZ(0);
       }
     }
   </style>
 
+
   <path d="M24107.9 7548.34C24107.9 6676.18 23761.4 5839.73 23144.7 5223.02C22528 4606.3 21691.5 4259.84 20819.4 4259.84C19947.2 4259.84 19110.8 4606.3 18494.1 5223.02C17877.3 5839.73 17530.9 6676.18 17530.9 7548.34L20819.4 7548.34H24107.9Z" fill="#303030"/>
   <circle id="left-eye" cx="16220.2" cy="13083.8" r="1825.65" fill="#303030"/>
   <circle id="right-eye" cx="25535.6" cy="13083.8" r="1825.65" fill="#303030"/>