From a4ef140e75c77eba95a14486601e685ad02cc49c Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Wed, 17 Jan 2024 23:42:40 +0100
Subject: [PATCH] animate inside svg

---
 website/theme/static/css/styles.css           |  3 +
 .../static/images/gfx-index-animation.svg     | 66 +++++++++++++++++++
 website/theme/templates/index.html            |  4 +-
 3 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 website/theme/static/images/gfx-index-animation.svg

diff --git a/website/theme/static/css/styles.css b/website/theme/static/css/styles.css
index 1df4a2c..4c43ad4 100644
--- a/website/theme/static/css/styles.css
+++ b/website/theme/static/css/styles.css
@@ -120,6 +120,9 @@ IMAGES
 /* ---------------------------------------------------
 ANIMATION
 ----------------------------------------------------*/
+
+
+/* --- 040 ------------------ */
 .a-040-010 circle {
   animation: show-hide-14 14s ease infinite;
   transform-origin: center;
diff --git a/website/theme/static/images/gfx-index-animation.svg b/website/theme/static/images/gfx-index-animation.svg
new file mode 100644
index 0000000..60795a8
--- /dev/null
+++ b/website/theme/static/images/gfx-index-animation.svg
@@ -0,0 +1,66 @@
+<svg class="db" width="768" height="448" viewBox="0 0 768 448" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <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="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="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"/>
+
+  <circle cx="96" cy="32" r="32" fill="#4B1202"/>
+
+  <circle id="my-circle" cx="32" cy="96" r="32" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="10s"
+      values="1; 1; 0; 0; 1; 1"
+      keyTimes="0; 0.18; 0.2; 0.38; 0.4; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="r"
+      dur="10s"
+      values="32; 32; 26; 26; 32; 32"
+      keyTimes="0; 0.18; 0.2; 0.38; 0.4; 1"
+      repeatCount="indefinite"/>
+  </circle>
+
+  <circle cx="96" cy="160" r="32" fill="#4B1202"/>
+  <circle cx="160" cy="416" r="32" fill="#4B1202"/>
+  <circle cx="480" cy="416" r="32" fill="#4B1202"/>
+  <circle cx="672" cy="416" r="32" fill="#4B1202"/>
+  <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="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="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="672" cy="160" r="32" fill="#4B1202"/>
+  <circle cx="160" cy="96" r="32" fill="#4B1202"/>
+  <circle cx="288" cy="96" r="32" fill="#4B1202"/>
+  <circle cx="544" cy="96" r="32" fill="#4B1202"/>
+  <circle cx="672" cy="96" r="32" fill="#4B1202"/>
+  <circle cx="224" cy="32" r="32" fill="#4B1202"/>
+  <circle cx="416" cy="32" r="32" fill="#4B1202"/>
+
+
+
+
+
+</svg>
diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index cf50d99..6390e1b 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -7,7 +7,9 @@
 
   <div class="w-100 bgColorOrange">
     <div class="mw7 center">
-      <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448px" class="db imageCropSplash">
+
+      <img src="/theme/images/gfx-index-animation.svg" alt="pattern" width="768px" height="448px" class="db imageCropSplash">
+
     </div>
   </div>