From 3ed34aca9553a6a25f71fbbbb38da652a37d0e2e Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Sat, 20 Jan 2024 21:39:07 +0100
Subject: [PATCH] animation-2 (#22)

Reviewed-on: https://git.offen.dev/offen.software/website/pulls/22
Co-authored-by: hendr-ik <hello@niefeld.com>
Co-committed-by: hendr-ik <hello@niefeld.com>
---
 website/theme/static/css/styles.css           |  26 ++-
 .../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     | 201 ++++++++++++++++++
 website/theme/static/images/gfx-index.svg     |  45 ----
 website/theme/templates/base.html             |   5 +-
 website/theme/templates/index.html            |   8 +-
 14 files changed, 364 insertions(+), 131 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
 create mode 100644 website/theme/static/images/gfx-index-animation.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 f8ae86b..3d17a6e 100644
--- a/website/theme/static/css/styles.css
+++ b/website/theme/static/css/styles.css
@@ -120,6 +120,7 @@ IMAGES
 /* ---------------------------------------------------
 ANIMATION
 ----------------------------------------------------*/
+/* --- 040 ------------------ */
 .a-040-010 circle {
   animation: show-hide-14 14s ease infinite;
   transform-origin: center;
@@ -131,7 +132,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 +270,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% {
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
new file mode 100644
index 0000000..992682c
--- /dev/null
+++ b/website/theme/static/images/gfx-index-animation.svg
@@ -0,0 +1,201 @@
+<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"/>
+
+  <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 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 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 cx="32" cy="96" r="32" fill="#4B1202">
+    <animate attributeName="opacity"
+      dur="22s"
+      values="1; 1; 0; 0; 1; 1"
+      keyTimes="0; 0.19; 0.2; 0.39; 0.4; 1"
+      repeatCount="indefinite"/>
+    <animate attributeName="r"
+      dur="22s"
+      values="32; 32; 26; 26; 32; 32"
+      keyTimes="0; 0.19; 0.2; 0.39; 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 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 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"/>
+  <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/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 cf50d99..237a0c1 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>
 
@@ -31,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>
 
@@ -48,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>