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] 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>