From 1fe290837e32b014a5fddce70b0b3a1008599888 Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Tue, 16 Jan 2024 21:34:04 +0100
Subject: [PATCH 1/7] svg animation test

---
 website/theme/static/css/styles.css | 14 ++++++++++++++
 website/theme/templates/index.html  |  6 +++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/website/theme/static/css/styles.css b/website/theme/static/css/styles.css
index cd1f13a..cd413a8 100644
--- a/website/theme/static/css/styles.css
+++ b/website/theme/static/css/styles.css
@@ -116,3 +116,17 @@ IMAGES
 .imageCrop {
   object-fit: none;
 }
+
+/* ---------------------------------------------------
+ANIMATION
+----------------------------------------------------*/
+.circle-orange {
+  animation: hideshow 2s ease infinite;
+}
+@keyframes hideshow {
+  0% { opacity: 1; }
+  40% { opacity: 1; }
+  50% { opacity: 0; }
+  90% { opacity: 0; }
+  100% { opacity: 1; }
+}
diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index 30655cb..bdb9872 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -79,7 +79,11 @@
 
     <div class="flex flex-wrap justify-center">
 
-      <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
+      <div class="db self-start pl5 pa0-l">
+        <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle class="circle-orange" cx="32" cy="32" r="32" fill="#E9500A"/>
+        </svg>
+      </div>
 
       <div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
           <div class="wExtra32 colorSalmon ph3 pv4 pa4-l">
-- 
2.45.2


From 3964217cf497590f43515499f37765f42515b46d Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Wed, 17 Jan 2024 20:30:42 +0100
Subject: [PATCH 2/7] svg animation fold2

---
 website/theme/static/css/styles.css | 178 ++++++++++++++++++++++++++--
 website/theme/templates/index.html  |  81 ++++++++++---
 2 files changed, 236 insertions(+), 23 deletions(-)

diff --git a/website/theme/static/css/styles.css b/website/theme/static/css/styles.css
index cd413a8..f8ae86b 100644
--- a/website/theme/static/css/styles.css
+++ b/website/theme/static/css/styles.css
@@ -120,13 +120,175 @@ IMAGES
 /* ---------------------------------------------------
 ANIMATION
 ----------------------------------------------------*/
-.circle-orange {
-  animation: hideshow 2s ease infinite;
+.a-040-010 circle {
+  animation: show-hide-14 14s ease infinite;
+  transform-origin: center;
 }
-@keyframes hideshow {
-  0% { opacity: 1; }
-  40% { opacity: 1; }
-  50% { opacity: 0; }
-  90% { opacity: 0; }
-  100% { opacity: 1; }
+.a-040-010 rect {
+  opacity: 0;
+  animation: hide-show-14 14s ease infinite;
+  transform-origin: center;
+}
+/* ---------- */
+.a-040-030 circle {
+  animation: show-hide-10 10s ease infinite;
+  transform-origin: center;
+}
+/* ---------- */
+.a-040-070 circle {
+  animation: show-hide-16 16s ease infinite;
+  transform-origin: center;
+}
+.a-040-070 rect {
+  opacity: 0;
+  animation: hide-show-16 16s ease infinite;
+  transform-origin: center;
+}
+/* ---------- */
+.a-040-090 rect {
+  animation: show-hide-10 10s ease infinite;
+  transform-origin: center;
+}
+/* ---------- */
+.a-040-120 rect {
+  animation: show-hide-20 20s ease infinite;
+  transform-origin: center;
+}
+
+/* --- KEYFRAMES --- */
+/* --- 10 ------------------ */
+@keyframes show-hide-10 {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  22% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  26% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  46% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+/* --- 14 ------------------ */
+@keyframes show-hide-14 {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  46% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  48% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  98% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes hide-show-14 {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  48% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  96% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  98% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+/* --- 16 ------------------ */
+@keyframes show-hide-16 {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  56% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  58% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  98% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes hide-show-16 {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  58% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  96% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  98% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+/* --- 20 ------------------ */
+@keyframes show-hide-20 {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  74% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  76% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  86% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  88% {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index bdb9872..8495b16 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -79,9 +79,10 @@
 
     <div class="flex flex-wrap justify-center">
 
-      <div class="db self-start pl5 pa0-l">
-        <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <circle class="circle-orange" cx="32" cy="32" r="32" fill="#E9500A"/>
+      <div class="self-start pl5 pa0-l">
+        <svg class="a-040-010 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="32" cy="32" r="32" fill="#E9500A"/>
+          <rect width="64" height="64" rx="2" fill="#E9500A"/>
         </svg>
       </div>
 
@@ -105,11 +106,23 @@
               </p>
             </div>
           </div>
-        <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db ml5 ma0-l">
+        <div class="ml5 ma0-l">
+          <svg class="s-040-020 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="32" cy="32" r="32" fill="#E9500A"/>
+          </svg>
+        </div>
       </div>
 
-      <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
-      <img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
+      <div class="self-end pr5 pa0-l">
+        <svg class="a-040-030 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="32" cy="32" r="32" fill="#E9500A"/>
+        </svg>
+      </div>
+      <div class="self-end pr5 pa0-l">
+        <svg class="s-040-040 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="64" height="64" rx="2" fill="#E9500A"/>
+        </svg>
+      </div>
 
       <div class="wExtra24 colorSalmon ph3 pv4 pa4-l">
         <div class="mw6-m center-m">
@@ -128,7 +141,12 @@
         </div>
       </div>
 
-      <img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
+      <div class="self-start pl5 pa0-l">
+        <svg class="s-040-050 db" width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="32" cy="32" r="32" fill="#E9500A"/>
+          <circle cx="32" cy="96" r="32" fill="#E9500A"/>
+        </svg>
+      </div>
 
       <div class="wExtra24 colorSalmon ph3 pv4 pa4-l">
         <div class="mw6-m center-m">
@@ -150,8 +168,19 @@
         </div>
       </div>
 
-      <img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
-      <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
+      <div class="self-start pl5 pa0-l">
+        <svg class="s-040-060 db" width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="32" cy="32" r="32" fill="#E9500A"/>
+          <circle cx="32" cy="96" r="32" fill="#E9500A"/>
+        </svg>
+      </div>
+
+      <div class="self-end pr5 pa0-l">
+        <svg class="a-040-070 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="32" cy="32" r="32" fill="#E9500A"/>
+          <rect width="64" height="64" rx="2" fill="#E9500A"/>
+        </svg>
+      </div>
 
       <div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
         <div class="wExtra32 colorSalmon ph3 pv4 pa4-l">
@@ -173,11 +202,24 @@
             </p>
           </div>
         </div>
-        <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db mr5 ma0-l">
+        <div class="mr5 ma0-l">
+          <svg class="s-040-080 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="32" cy="32" r="32" fill="#E9500A"/>
+          </svg>
+        </div>
       </div>
 
-      <img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-start pr5 pa0-l">
-      <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
+      <div class="self-start pr5 pa0-l">
+        <svg class="a-040-090 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="64" height="64" rx="2" fill="#E9500A"/>
+        </svg>
+      </div>
+
+      <div class="self-start pl5 pa0-l">
+        <svg class="s-040-100 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="32" cy="32" r="32" fill="#E9500A"/>
+        </svg>
+      </div>
 
       <div class="wExtra32 colorSalmon ph3 pv4 pa4-l">
         <div class="mw6-m center-m">
@@ -199,11 +241,20 @@
         </div>
       </div>
 
-      <img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-end pr5 pa0-l">
-      <img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-start pr5 pa0-l">
+      <div class="self-end pr5 pa0-l">
+        <svg class="s-040-110 db" width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="32" cy="32" r="32" fill="#E9500A"/>
+          <circle cx="32" cy="96" r="32" fill="#E9500A"/>
+        </svg>
+      </div>
+
+      <div class="self-start pr5 pa0-l">
+        <svg class="a-040-120 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="64" height="64" rx="2" fill="#E9500A"/>
+        </svg>
+      </div>
 
     </div>
-
   </div>
 
 </div>
-- 
2.45.2


From a573cb014f49256bd5ace9edd01f750cd84d912a Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Wed, 17 Jan 2024 20:36:39 +0100
Subject: [PATCH 3/7] tweaks

---
 website/theme/templates/base.html  | 12 ++++++++----
 website/theme/templates/index.html |  4 ++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/website/theme/templates/base.html b/website/theme/templates/base.html
index d959aa4..01e2579 100644
--- a/website/theme/templates/base.html
+++ b/website/theme/templates/base.html
@@ -37,12 +37,16 @@
 {% endblock %}
   <body class="poppins f4 trackedWide lh-title no-js colorSalmon bgColorWine">
 {% if template == 'index' %}
-  <div class="w-100 mw9-ns center-ns h3 colorSalmonLink">
-    <a class="link dim" href="/"><h1 class="f4 logoPadding ma0 ml3 ml5-l"><span class="fw4">offen.</span><span class="fw7">software</span></h1></a>
+  <div class="w-100 colorSalmonLink">
+    <div class="mw9-ns center-ns h3">
+      <a class="link dim" href="/"><h1 class="f4 logoPadding ma0 ml3 ml5-l"><span class="fw4">offen.</span><span class="fw7">software</span></h1></a>
+    </div>
   </div>
 {% else %}
-  <div class="w-100 mw9-ns center-ns h3 colorWineLink bgColorOrange">
-    <a class="link dim" href="/"><h1 class="f4 logoPadding ma0 ml3 ml5-l"><span class="fw4">offen.</span><span class="fw7">software</span></h1></a>
+  <div class="w-100  colorWineLink bgColorOrange">
+    <div class="mw9-ns center-ns h3">
+      <a class="link dim" href="/"><h1 class="f4 logoPadding ma0 ml3 ml5-l"><span class="fw4">offen.</span><span class="fw7">software</span></h1></a>
+    </div>
   </div>
 {% endif %}
 
diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index 8495b16..cf50d99 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -38,7 +38,7 @@
   <div class="mw7 center mv5 ph3 ph0-l">
 
     <p class="ma0 mb4 ml6-l">
-      The world is in flux, and it’s a unique opportunity to <span class="fw7 f4 f2-l">facilitate change for the better.</span>
+      The world is in flux, and it's a unique opportunity to <span class="fw7 f4 f2-l">facilitate change for the better.</span>
     </p>
     <p class="ma0 mr4 mr6-l">
       We want to enable the makers that are driving this change by providing them with <span class="fw7 f4 f2-l">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy.
@@ -55,7 +55,7 @@
   <div class="mw7 center mt5 ph3 ph0-l">
 
     <p class="ma0 mb4  ml6-l">
-      <span class="fw7 f4 f2-l">Located in Berlin</span>, we’re a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live.
+      <span class="fw7 f4 f2-l">Located in Berlin</span>, we're a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live.
     </p>
     <p class="ma0 mb4 mr6-l">
       <span class="fw7 f4 f2-l">Working fully open source </span>allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge.
-- 
2.45.2


From f85ac66e3c0fd050aecd073f2834d6033fac6619 Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Wed, 17 Jan 2024 20:47:22 +0100
Subject: [PATCH 4/7] animation details

---
 website/theme/static/css/styles.css | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/website/theme/static/css/styles.css b/website/theme/static/css/styles.css
index f8ae86b..1df4a2c 100644
--- a/website/theme/static/css/styles.css
+++ b/website/theme/static/css/styles.css
@@ -131,7 +131,7 @@ ANIMATION
 }
 /* ---------- */
 .a-040-030 circle {
-  animation: show-hide-10 10s ease infinite;
+  animation: show-hide-18 18s ease infinite;
   transform-origin: center;
 }
 /* ---------- */
@@ -269,6 +269,29 @@ ANIMATION
     transform: scale(0.8);
   }
 }
+/* --- 18 ------------------ */
+@keyframes show-hide-18 {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  34% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  36% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  56% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  58% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 /* --- 20 ------------------ */
 @keyframes show-hide-20 {
   0% {
-- 
2.45.2


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 5/7] 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>
 
-- 
2.45.2


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 6/7] 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>
-- 
2.45.2


From 730e583d24c8fdd8828c767ae6ef5b2ec111fa4d Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Sat, 20 Jan 2024 21:38:31 +0100
Subject: [PATCH 7/7] animate inside svg

---
 website/theme/static/css/styles.css           |  2 -
 .../static/images/gfx-content-1-animation.svg | 27 ++++++++
 website/theme/static/images/gfx-content-1.svg | 19 ------
 .../static/images/gfx-content-2-animation.svg | 38 +++++++++++
 website/theme/static/images/gfx-content-2.svg |  8 ---
 .../static/images/gfx-content-3-animation.svg | 67 +++++++++++++++++++
 website/theme/static/images/gfx-content-3.svg | 20 ------
 website/theme/static/images/gfx-detail-1.svg  | 10 ---
 website/theme/static/images/gfx-detail-2.svg  | 11 ---
 website/theme/static/images/gfx-detail-3.svg  | 10 ---
 .../static/images/gfx-index-animation.svg     |  6 +-
 website/theme/static/images/gfx-index.svg     | 45 -------------
 website/theme/templates/base.html             |  5 +-
 website/theme/templates/index.html            |  4 +-
 14 files changed, 138 insertions(+), 134 deletions(-)
 create mode 100644 website/theme/static/images/gfx-content-1-animation.svg
 delete mode 100644 website/theme/static/images/gfx-content-1.svg
 create mode 100644 website/theme/static/images/gfx-content-2-animation.svg
 delete mode 100644 website/theme/static/images/gfx-content-2.svg
 create mode 100644 website/theme/static/images/gfx-content-3-animation.svg
 delete mode 100644 website/theme/static/images/gfx-content-3.svg
 delete mode 100644 website/theme/static/images/gfx-detail-1.svg
 delete mode 100644 website/theme/static/images/gfx-detail-2.svg
 delete mode 100644 website/theme/static/images/gfx-detail-3.svg
 delete mode 100644 website/theme/static/images/gfx-index.svg

diff --git a/website/theme/static/css/styles.css b/website/theme/static/css/styles.css
index 4c43ad4..3d17a6e 100644
--- a/website/theme/static/css/styles.css
+++ b/website/theme/static/css/styles.css
@@ -120,8 +120,6 @@ IMAGES
 /* ---------------------------------------------------
 ANIMATION
 ----------------------------------------------------*/
-
-
 /* --- 040 ------------------ */
 .a-040-010 circle {
   animation: show-hide-14 14s ease infinite;
diff --git a/website/theme/static/images/gfx-content-1-animation.svg b/website/theme/static/images/gfx-content-1-animation.svg
new file mode 100644
index 0000000..862a7b7
--- /dev/null
+++ b/website/theme/static/images/gfx-content-1-animation.svg
@@ -0,0 +1,27 @@
+<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="704" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
+  <rect x="448" y="64" width="64" height="64" fill="#4B1202"/>
+  <rect x="384" width="64" height="64" fill="#4B1202"/>
+  <rect x="256" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
+  <rect width="64" height="64" rx="2" fill="#4B1202"/>
+  <circle cx="224" cy="32" r="32" fill="#4B1202"/>
+  <circle cx="96" cy="160" r="32" fill="#4B1202"/>
+
+  <circle cx="352" cy="96" r="32" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="22s"
+      values="1; 1; 0; 0; 1; 1"
+      keyTimes="0; 0.26; 0.27; 0.36; 0.37; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="r"
+      dur="22s"
+      values="32; 32; 26; 26; 32; 32"
+      keyTimes="0; 0.26; 0.27; 0.36; 0.37; 1"
+      repeatCount="indefinite"/>
+  </circle>
+
+  <circle cx="224" cy="96" r="32" fill="#4B1202"/>
+  <circle cx="672" cy="96" r="32" fill="#4B1202"/>
+
+</svg>
diff --git a/website/theme/static/images/gfx-content-1.svg b/website/theme/static/images/gfx-content-1.svg
deleted file mode 100644
index a022611..0000000
--- a/website/theme/static/images/gfx-content-1.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_80_246)">
-<rect x="704" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
-<rect x="448" y="64" width="64" height="64" fill="#4B1202"/>
-<rect x="384" width="64" height="64" fill="#4B1202"/>
-<rect x="256" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
-<rect width="64" height="64" rx="2" fill="#4B1202"/>
-<circle cx="224" cy="32" r="32" fill="#4B1202"/>
-<circle cx="96" cy="160" r="32" fill="#4B1202"/>
-<circle cx="352" cy="96" r="32" fill="#4B1202"/>
-<circle cx="224" cy="96" r="32" fill="#4B1202"/>
-<circle cx="672" cy="96" r="32" fill="#4B1202"/>
-</g>
-<defs>
-<clipPath id="clip0_80_246">
-<rect width="768" height="192" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/website/theme/static/images/gfx-content-2-animation.svg b/website/theme/static/images/gfx-content-2-animation.svg
new file mode 100644
index 0000000..c919934
--- /dev/null
+++ b/website/theme/static/images/gfx-content-2-animation.svg
@@ -0,0 +1,38 @@
+<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="448" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
+
+  <rect x="512" y="128" width="64" height="64" rx="2" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="14s"
+      values="1; 1; 0; 0; 1; 1"
+      keyTimes="0; 0.18; 0.2; 0.29; 0.31; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="width"
+      dur="14s"
+      values="64; 64; 50; 50; 64; 64"
+      keyTimes="0; 0.18; 0.2; 0.29; 0.31; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="height"
+      dur="14s"
+      values="64; 64; 50; 50; 64; 64"
+      keyTimes="0; 0.18; 0.2; 0.29; 0.31; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="x"
+      dur="14s"
+      values="512; 512; 519; 519; 512; 512"
+      keyTimes="0; 0.18; 0.2; 0.29; 0.31; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="y"
+      dur="14s"
+      values="128; 128; 135; 135; 128; 128"
+      keyTimes="0; 0.18; 0.2; 0.29; 0.31; 1"
+      repeatCount="indefinite"/>
+  </rect>
+
+  <circle cx="96" cy="32" r="32" fill="#4B1202"/>
+  <circle cx="224" cy="32" r="32" fill="#4B1202"/>
+  <circle cx="288" cy="32" r="32" fill="#4B1202"/>
+  <circle cx="352" cy="160" r="32" fill="#4B1202"/>
+
+</svg>
diff --git a/website/theme/static/images/gfx-content-2.svg b/website/theme/static/images/gfx-content-2.svg
deleted file mode 100644
index d26e710..0000000
--- a/website/theme/static/images/gfx-content-2.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="448" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
-<rect x="512" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
-<circle cx="96" cy="32" r="32" fill="#4B1202"/>
-<circle cx="224" cy="32" r="32" fill="#4B1202"/>
-<circle cx="288" cy="32" r="32" fill="#4B1202"/>
-<circle cx="352" cy="160" r="32" fill="#4B1202"/>
-</svg>
diff --git a/website/theme/static/images/gfx-content-3-animation.svg b/website/theme/static/images/gfx-content-3-animation.svg
new file mode 100644
index 0000000..b95f650
--- /dev/null
+++ b/website/theme/static/images/gfx-content-3-animation.svg
@@ -0,0 +1,67 @@
+<svg width="768" height="128" viewBox="0 0 768 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="320" y="64" 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="320; 320; 327; 327; 320; 320"
+      keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="y"
+      dur="16s"
+      values="64; 64; 71; 71; 64; 64"
+      keyTimes="0; 0.19; 0.2; 0.69; 0.7; 1"
+      repeatCount="indefinite"/>
+  </rect>
+  <circle cx="352" cy="96" 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>
+
+  <rect x="512" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
+  <rect y="64" width="64" height="64" rx="2" fill="#4B1202"/>
+  <circle cx="96" cy="32" r="32" fill="#4B1202"/>
+  <circle cx="224" cy="32" r="32" fill="#4B1202"/>
+  <circle cx="288" cy="32" r="32" fill="#4B1202"/>
+  <circle cx="416" cy="32" r="32" fill="#4B1202"/>
+  <circle cx="480" cy="32" r="32" fill="#4B1202"/>
+  <circle cx="608" cy="32" r="32" fill="#4B1202"/>
+
+  <circle cx="672" cy="32" r="32" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="4s"
+      values="1; 1; 0; 0; 1; 1"
+      keyTimes="0; 0.26; 0.3; 0.36; 0.4; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="r"
+      dur="4s"
+      values="32; 32; 26; 26; 32; 32"
+      keyTimes="0; 0.26; 0.3; 0.36; 0.4; 1"
+      repeatCount="indefinite"/>
+  </circle>
+
+  <circle cx="736" cy="32" r="32" fill="#4B1202"/>
+
+</svg>
diff --git a/website/theme/static/images/gfx-content-3.svg b/website/theme/static/images/gfx-content-3.svg
deleted file mode 100644
index 1cca19b..0000000
--- a/website/theme/static/images/gfx-content-3.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg width="768" height="128" viewBox="0 0 768 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_90_2)">
-<rect x="320" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
-<rect x="512" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
-<rect y="64" width="64" height="64" rx="2" fill="#4B1202"/>
-<circle cx="96" cy="32" r="32" fill="#4B1202"/>
-<circle cx="224" cy="32" r="32" fill="#4B1202"/>
-<circle cx="288" cy="32" r="32" fill="#4B1202"/>
-<circle cx="416" cy="32" r="32" fill="#4B1202"/>
-<circle cx="480" cy="32" r="32" fill="#4B1202"/>
-<circle cx="608" cy="32" r="32" fill="#4B1202"/>
-<circle cx="672" cy="32" r="32" fill="#4B1202"/>
-<circle cx="736" cy="32" r="32" fill="#4B1202"/>
-</g>
-<defs>
-<clipPath id="clip0_90_2">
-<rect width="768" height="128" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/website/theme/static/images/gfx-detail-1.svg b/website/theme/static/images/gfx-detail-1.svg
deleted file mode 100644
index 4d85bb3..0000000
--- a/website/theme/static/images/gfx-detail-1.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_85_316)">
-<circle cx="32" cy="32" r="32" fill="#E9500A"/>
-</g>
-<defs>
-<clipPath id="clip0_85_316">
-<rect width="64" height="64" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/website/theme/static/images/gfx-detail-2.svg b/website/theme/static/images/gfx-detail-2.svg
deleted file mode 100644
index 1cf5874..0000000
--- a/website/theme/static/images/gfx-detail-2.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_86_327)">
-<circle cx="32" cy="32" r="32" fill="#E9500A"/>
-<circle cx="32" cy="96" r="32" fill="#E9500A"/>
-</g>
-<defs>
-<clipPath id="clip0_86_327">
-<rect width="64" height="128" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/website/theme/static/images/gfx-detail-3.svg b/website/theme/static/images/gfx-detail-3.svg
deleted file mode 100644
index 3da583c..0000000
--- a/website/theme/static/images/gfx-detail-3.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_92_25)">
-<rect width="64" height="64" rx="2" fill="#E9500A"/>
-</g>
-<defs>
-<clipPath id="clip0_92_25">
-<rect width="64" height="64" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/website/theme/static/images/gfx-index-animation.svg b/website/theme/static/images/gfx-index-animation.svg
index c329fef..992682c 100644
--- a/website/theme/static/images/gfx-index-animation.svg
+++ b/website/theme/static/images/gfx-index-animation.svg
@@ -1,4 +1,5 @@
-<svg class="db" width="768" height="448" viewBox="0 0 768 448" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg 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"/>
 
@@ -73,7 +74,7 @@
       values="0; 0; 7; 7; 0; 0"
       keyTimes="0; 0.19; 0.2; 0.29; 0.3; 1"
       repeatCount="indefinite"/>
-    </rect>
+  </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"/>
@@ -172,7 +173,6 @@
       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"/>
diff --git a/website/theme/static/images/gfx-index.svg b/website/theme/static/images/gfx-index.svg
deleted file mode 100644
index c81ed58..0000000
--- a/website/theme/static/images/gfx-index.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-<svg width="768" height="448" viewBox="0 0 768 448" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_79_77)">
-<rect width="64" height="64" rx="2" fill="#4B1202"/>
-<rect x="64" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
-<rect 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 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 x="704" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
-<circle cx="96" cy="32" r="32" fill="#4B1202"/>
-<circle cx="32" cy="96" r="32" fill="#4B1202"/>
-<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 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 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"/>
-</g>
-<defs>
-<clipPath id="clip0_79_77">
-<rect width="768" height="448" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/website/theme/templates/base.html b/website/theme/templates/base.html
index 0785052..3b05215 100644
--- a/website/theme/templates/base.html
+++ b/website/theme/templates/base.html
@@ -25,7 +25,6 @@
   <link rel="apple-touch-icon" sizes="180x180" href="{{ SITEURL }}/theme/images/site-apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="{{ SITEURL }}/theme/images/site-favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="{{ SITEURL }}/theme/images/site-favicon-16x16.png">
-
   {% assets filters="postcss", output="css/style.min.css", "css/tachyons.min.css", "css/styles.css", "css/fonts.css" %}
     <link rel="stylesheet" href="/{{ ASSET_URL }}">
   {% endassets %}
@@ -50,8 +49,6 @@
   </div>
 {% endif %}
 
-
-
   {% block content %}{% endblock %}
 
   <div class="w-100 colorWine bgColorOrange">
@@ -89,7 +86,7 @@
 
     <div class="w-100 bgColorOrange">
       <div class="mw7 center">
-        <img src="/theme/images/gfx-content-3.svg" alt="pattern" width="768px" height="128px" class="db imageCrop">
+        <img src="/theme/images/gfx-content-3-animation.svg" alt="pattern" width="768px" height="128px" class="db imageCrop">
       </div>
     </div>
 
diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index 6390e1b..237a0c1 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -33,7 +33,7 @@
 
   <div class="w-100 bgColorOrange">
     <div class="mw7 center">
-      <img src="/theme/images/gfx-content-1.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
+      <img src="/theme/images/gfx-content-1-animation.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
     </div>
   </div>
 
@@ -50,7 +50,7 @@
 
   <div class="w-100 bgColorOrange">
     <div class="mw7 center">
-      <img src="/theme/images/gfx-content-2.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
+      <img src="/theme/images/gfx-content-2-animation.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
     </div>
   </div>
 
-- 
2.45.2