From 07296b3d61cc0f882b084dbc7753c1f0b08e55b2 Mon Sep 17 00:00:00 2001
From: Florian Dagner <99618839+fdagner@users.noreply.github.com>
Date: Tue, 7 Nov 2023 21:07:27 +0100
Subject: [PATCH 1/2] Changed the size of the bubble from absolute to relative
 so that the effect is the same for every image size

---
 templates/bubbles.raw | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/templates/bubbles.raw b/templates/bubbles.raw
index 36e64a4..b5ef903 100644
--- a/templates/bubbles.raw
+++ b/templates/bubbles.raw
@@ -10,55 +10,55 @@
     <circle cx="0%" cy="0%" r="0" style="fill:#d8d8d8; fill-opacity:0.4128;">
       <animate attributeName="cx" values="30%;32%;30%;32%;30%;32%;30%;32%" dur="8s" begin="0s" repeatCount="indefinite" />
       <animate attributeName="cy" values="950%;0%" dur="8s" begin="0s" repeatCount="indefinite" />
-      <animate attributeName="r" values="20;15;10;5;2;0;0;0" dur="8s" begin="0s" repeatCount="indefinite" />
+      <animate attributeName="r" values="1%;0.8%;0.5%;0.2%;0.1%;0;0;0" dur="8s" begin="0s" repeatCount="indefinite" />
     </circle>
 
     <circle cx="0%" cy="0%" r="0" style="fill:#d8d8d8; fill-opacity:0.4128;">
       <animate attributeName="cx" values="62%;60%;63%;60%;63%;68%;62%;69%" dur="10s" begin="2s" repeatCount="indefinite" />
       <animate attributeName="cy" values="90%;0%" dur="10s" begin="2s" repeatCount="indefinite" />
-      <animate attributeName="r" values="18;16;15;10;2;0;0;0" dur="10s" begin="2s" repeatCount="indefinite" />
+      <animate attributeName="r" values="0.9%;0.7%;0.5%;0.2%;0.1%;0;0;0" dur="10s" begin="2s" repeatCount="indefinite" />
     </circle>
 
     <circle cx="0%" cy="0%" r="0" style="fill:#d8d8d8; fill-opacity:0.4128;">
         <animate attributeName="cx" values="80%;82%;80%;82%;80%;82%;80%;82%" dur="9s" begin="6s" repeatCount="indefinite" />
         <animate attributeName="cy" values="90%;0%" dur="9s" begin="6s" repeatCount="indefinite" />
-        <animate attributeName="r" values="24;22;21;20;10;0;0;0" dur="9s" begin="6s" repeatCount="indefinite" />
+        <animate attributeName="r" values="1.2%;1.1%;1%;1%;0.5%;0;0;0" dur="9s" begin="6s" repeatCount="indefinite" />
     </circle>
 
     <circle cx="0%" cy="0%" r="0" style="fill:#d8d8d8; fill-opacity:0.4128;">
       <animate attributeName="cx" values="40%;42%;40%;42%;40%;44%;46%;48%" dur="6s" begin="2.5s" repeatCount="indefinite" />
       <animate attributeName="cy" values="50%;0%" dur="6s" begin="2.5s" repeatCount="indefinite" />
-      <animate attributeName="r" values="10;5;0" dur="6s" begin="2.5s" repeatCount="indefinite" />
+      <animate attributeName="r" values="0.5%;.2%;0%" dur="6s" begin="2.5s" repeatCount="indefinite" />
     </circle>
 
     <circle cx="0%" cy="0%" r="0" style="fill:#d8d8d8; fill-opacity:0.4128;">
         <animate attributeName="cx" values="50%;57%;55%;57%;55%;57%;55%;57%" dur="8s" begin="4.5s" repeatCount="indefinite" />
         <animate attributeName="cy" values="85%;0%" dur="8s" begin="4.5s" repeatCount="indefinite" />
-        <animate attributeName="r" values="15;12;10;8;4;0;0;0" dur="8s" begin="4.5s" repeatCount="indefinite" />
+        <animate attributeName="r" values="0.7%;0.5%;0.4%;0.3%;0.2%;0;0;0" dur="8s" begin="4.5s" repeatCount="indefinite" />
     </circle>
 
     <circle cx="0%" cy="0%" r="0" style="fill:#d8d8d8; fill-opacity:0.4128;">
         <animate attributeName="cx" values="5%;7%;5%;7%;5%;7%;5%;7%" dur="8s" begin="1s" repeatCount="indefinite" />
         <animate attributeName="cy" values="85%;0%" dur="8s" begin="1s" repeatCount="indefinite" />
-        <animate attributeName="r" values="15;12;10;8;4;0;0" dur="8s" begin="1s" repeatCount="indefinite" />
+        <animate attributeName="r" values="0.8%;0.7%;0.6%;0.5%;0.2%;0;0" dur="8s" begin="1s" repeatCount="indefinite" />
     </circle>
 
     <circle cx="0%" cy="0%" r="0" style="fill:#d8d8d8; fill-opacity:0.4128;">
         <animate attributeName="cx" values="40%;42%;40%;42%;40%;42%;40%;42%" dur="11s" begin="3s" repeatCount="indefinite" />
         <animate attributeName="cy" values="90%;0%" dur="11s" begin="3s" repeatCount="indefinite" />
-        <animate attributeName="r" values="25;22;20;15;7;0" dur="11s" begin="3s" repeatCount="indefinite" />
+        <animate attributeName="r" values="1.3%;1%;0.8%;0.6%;0.5%;0" dur="11s" begin="3s" repeatCount="indefinite" />
     </circle>
 
     <circle cx="0%" cy="0%" r="0" style="fill:#d8d8d8; fill-opacity:0.4128;">
         <animate attributeName="cx" values="70%;72%;70%;72%;70%;72%;70%;72%" dur="12s" begin="4s" repeatCount="indefinite" />
         <animate attributeName="cy" values="95%;0%" dur="12s" begin="4s" repeatCount="indefinite" />
-        <animate attributeName="r" values="25;22;20;20;8;0;0;0" dur="12s" begin="4s" repeatCount="indefinite" />
+        <animate attributeName="r" values="1.2%;1.1%;1%;1%;0.5%;0;0;0" dur="12s" begin="4s" repeatCount="indefinite" />
     </circle>
 
     <circle cx="0%" cy="0%" r="0" style="fill:#d8d8d8; fill-opacity:0.4128;">
         <animate attributeName="cx" values="15%;17%;15%;17%;15%;17%;15%;17%" dur="12s" begin="5s" repeatCount="indefinite" />
         <animate attributeName="cy" values="85%;0%" dur="12s" begin="5s" repeatCount="indefinite" />
-        <animate attributeName="r" values="22;18;14;10;4;0;0;0" dur="12s" begin="5s" repeatCount="indefinite" />
+        <animate attributeName="r" values="1.1%;1.0%;0.7%;0.6%;0.2%;0;0;0" dur="12s" begin="5s" repeatCount="indefinite" />
     </circle>
   </g>
 </svg>

From d3f778479bda62344c713e2fa5c8a24a28562fe9 Mon Sep 17 00:00:00 2001
From: Florian Dagner <99618839+fdagner@users.noreply.github.com>
Date: Tue, 7 Nov 2023 21:33:26 +0100
Subject: [PATCH 2/2] Changed the size of the bubble from absolute to relative
 so that the effect is the same for every image size

---
 templates/bubbles.raw | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/bubbles.raw b/templates/bubbles.raw
index b5ef903..842055b 100644
--- a/templates/bubbles.raw
+++ b/templates/bubbles.raw
@@ -28,7 +28,7 @@
     <circle cx="0%" cy="0%" r="0" style="fill:#d8d8d8; fill-opacity:0.4128;">
       <animate attributeName="cx" values="40%;42%;40%;42%;40%;44%;46%;48%" dur="6s" begin="2.5s" repeatCount="indefinite" />
       <animate attributeName="cy" values="50%;0%" dur="6s" begin="2.5s" repeatCount="indefinite" />
-      <animate attributeName="r" values="0.5%;.2%;0%" dur="6s" begin="2.5s" repeatCount="indefinite" />
+      <animate attributeName="r" values="0.5%;0.2%;0%" dur="6s" begin="2.5s" repeatCount="indefinite" />
     </circle>
 
     <circle cx="0%" cy="0%" r="0" style="fill:#d8d8d8; fill-opacity:0.4128;">