From 4e6344a848176c5efe60d3c4d11ef448326eb33e Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Sat, 20 Jan 2024 21:03:28 +0100
Subject: [PATCH] animate inside svg

---
 .../static/images/gfx-index-animation.svg     | 163 ++++++++++++++++--
 1 file changed, 149 insertions(+), 14 deletions(-)

diff --git a/website/theme/static/images/gfx-index-animation.svg b/website/theme/static/images/gfx-index-animation.svg
index 60795a8..c329fef 100644
--- a/website/theme/static/images/gfx-index-animation.svg
+++ b/website/theme/static/images/gfx-index-animation.svg
@@ -2,34 +2,136 @@
   <rect width="64" height="64" rx="2" fill="#4B1202"/>
   <rect x="64" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
 
-  <rect id="a-010-040" x="192" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
+  <rect x="192" y="192" width="64" height="64" rx="2" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="14s"
+      values="1; 1; 0; 0; 1; 1"
+      keyTimes="0; 0.08; 0.1; 0.48; 0.5; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="width"
+      dur="14s"
+      values="64; 64; 50; 50; 64; 64"
+      keyTimes="0; 0.08; 0.1; 0.48; 0.5; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="height"
+      dur="14s"
+      values="64; 64; 50; 50; 64; 64"
+      keyTimes="0; 0.08; 0.1; 0.48; 0.5; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="x"
+      dur="14s"
+      values="192; 192; 200; 200; 192; 192"
+      keyTimes="0; 0.08; 0.1; 0.48; 0.5; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="y"
+      dur="14s"
+      values="192; 192; 200; 200; 192; 192"
+      keyTimes="0; 0.08; 0.1; 0.48; 0.5; 1"
+      repeatCount="indefinite"/>
+  </rect>
+  <circle cx="224" cy="224" r="32" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="14s"
+      values="0; 0; 1; 1; 0; 0"
+      keyTimes="0; 0.1; 0.12; 0.46; 0.48; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="r"
+      dur="14s"
+      values="26; 26; 32; 32; 26; 26"
+      keyTimes="0; 0.1; 0.12; 0.46; 0.48; 1"
+      repeatCount="indefinite"/>
+  </circle>
 
   <rect x="384" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
   <rect x="256" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
   <rect x="320" y="320" width="64" height="64" rx="2" fill="#4B1202"/>
   <rect x="384" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
 
-  <rect id="a-010-020" x="320" width="64" height="64" rx="2" fill="#4B1202"/>
+  <rect x="320" width="64" height="64" rx="2" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="20s"
+      values="1; 1; 0; 0; 1; 1"
+      keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="width"
+      dur="20s"
+      values="64; 64; 50; 50; 64; 64"
+      keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="height"
+      dur="20s"
+      values="64; 64; 50; 50; 64; 64"
+      keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="x"
+      dur="20s"
+      values="320; 320; 327; 327; 320; 320"
+      keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="y"
+      dur="20s"
+      values="0; 0; 7; 7; 0; 0"
+      keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
+      repeatCount="indefinite"/>
+    </rect>
 
   <rect x="192" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
   <rect x="448" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
   <rect x="512" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
   <rect x="576" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
 
-  <rect id="a-010-060" x="704" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
+  <rect x="704" y="384" width="64" height="64" rx="2" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="16s"
+      values="1; 1; 0; 0; 1; 1"
+      keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="width"
+      dur="16s"
+      values="64; 64; 50; 50; 64; 64"
+      keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="height"
+      dur="16s"
+      values="64; 64; 50; 50; 64; 64"
+      keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="x"
+      dur="16s"
+      values="704; 704; 710; 710; 704; 704"
+      keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="y"
+      dur="16s"
+      values="384; 384; 390; 390; 384; 384"
+      keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
+      repeatCount="indefinite"/>
+  </rect>
+  <circle cx="736" cy="416" r="32" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="16s"
+      values="0; 0; 1; 1; 0; 0"
+      keyTimes="0; 0.2; 0.21; 0.68; 0.69; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="r"
+      dur="16s"
+      values="26; 26; 32; 32; 26; 26"
+      keyTimes="0; 0.2; 0.21; 0.68; 0.69; 1"
+      repeatCount="indefinite"/>
+  </circle>
 
   <circle cx="96" cy="32" r="32" fill="#4B1202"/>
 
-  <circle id="my-circle" cx="32" cy="96" r="32" fill="#4B1202">
+  <circle cx="32" cy="96" r="32" fill="#4B1202">
     <animate attributeName="opacity"
-      dur="10s"
+      dur="22s"
       values="1; 1; 0; 0; 1; 1"
-      keyTimes="0; 0.18; 0.2; 0.38; 0.4; 1"
+      keyTimes="0; 0.19; 0.2; 0.39; 0.4; 1"
       repeatCount="indefinite"/>
     <animate attributeName="r"
-      dur="10s"
+      dur="22s"
       values="32; 32; 26; 26; 32; 32"
-      keyTimes="0; 0.18; 0.2; 0.38; 0.4; 1"
+      keyTimes="0; 0.19; 0.2; 0.39; 0.4; 1"
       repeatCount="indefinite"/>
   </circle>
 
@@ -40,16 +142,53 @@
   <circle cx="224" cy="352" r="32" fill="#4B1202"/>
   <circle cx="416" cy="352" r="32" fill="#4B1202"/>
 
-  <circle id="a-010-050" cx="608" cy="352" r="32" fill="#4B1202"/>
+  <circle cx="608" cy="352" r="32" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="13s"
+      values="1; 1; 0; 0; 1; 1"
+      keyTimes="0; 0.08; 0.1; 0.38; 0.4; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="r"
+      dur="13s"
+      values="32; 32; 26; 26; 32; 32"
+      keyTimes="0; 0.08; 0.1; 0.38; 0.4; 1"
+      repeatCount="indefinite"/>
+  </circle>
 
   <circle cx="96" cy="288" r="32" fill="#4B1202"/>
   <circle cx="160" cy="288" r="32" fill="#4B1202"/>
   <circle cx="416" cy="288" r="32" fill="#4B1202"/>
+
+  <circle cx="480" cy="288" r="32" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="8s"
+      values="0; 0; 1; 1; 0; 0"
+      keyTimes="0; 0.7; 0.73; 0.97; 1; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="r"
+      dur="8s"
+      values="26; 26; 32; 32; 26; 26"
+      keyTimes="0; 0.7; 0.73; 0.97; 1; 1"
+      repeatCount="indefinite"/>
+  </circle>
+
+
   <circle cx="352" cy="224" r="32" fill="#4B1202"/>
   <circle cx="672" cy="224" r="32" fill="#4B1202"/>
   <circle cx="224" cy="160" r="32" fill="#4B1202"/>
 
-  <circle id="a-010-030" cx="416" cy="160" r="32" fill="#4B1202"/>
+  <circle cx="416" cy="160" r="32" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="10s"
+      values="1; 1; 0; 0; 1; 1"
+      keyTimes="0; 0.05; 0.07; 0.18; 0.2; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="r"
+      dur="10s"
+      values="32; 32; 26; 26; 32; 32"
+      keyTimes="0; 0.05; 0.07; 0.18; 0.2; 1"
+      repeatCount="indefinite"/>
+  </circle>
 
   <circle cx="672" cy="160" r="32" fill="#4B1202"/>
   <circle cx="160" cy="96" r="32" fill="#4B1202"/>
@@ -59,8 +198,4 @@
   <circle cx="224" cy="32" r="32" fill="#4B1202"/>
   <circle cx="416" cy="32" r="32" fill="#4B1202"/>
 
-
-
-
-
 </svg>