animated icons

abhijeetunreal · abhijeetunreal · commit f4491df59248 · 2026-01-27T17:32:05.000+05:30
diff --git a/static/images/home/cfd-esp32cam.svg b/static/images/home/cfd-esp32cam.svg
@@ -2,23 +2,9 @@
      xmlns="http://www.w3.org/2000/svg">
 
   <defs>
-    <!-- Camera gradient -->
-    <linearGradient id="cameraGradient" x1="0" y1="0" x2="64" y2="64">
-      <stop offset="0%" stop-color="#00BCD4"/>
-      <stop offset="50%" stop-color="#0277BD"/>
-      <stop offset="100%" stop-color="#01579B"/>
-    </linearGradient>
-
-    <!-- Lens highlight gradient -->
-    <radialGradient id="lensGradient" cx="50%" cy="50%">
-      <stop offset="0%" stop-color="#4DD0E1"/>
-      <stop offset="70%" stop-color="#00BCD4"/>
-      <stop offset="100%" stop-color="#0277BD"/>
-    </radialGradient>
-
-    <!-- Soft glow effect -->
-    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+    <!-- Soft shadow -->
+    <filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="1.2" result="blur"/>
       <feMerge>
         <feMergeNode in="blur"/>
         <feMergeNode in="SourceGraphic"/>
@@ -27,31 +13,24 @@
   </defs>
 
   <!-- Camera body -->
-  <rect x="12" y="16" width="40" height="32" rx="4" fill="url(#cameraGradient)" filter="url(#glow)"/>
-
-  <!-- Camera lens (main circle) -->
-  <circle cx="32" cy="32" r="14" fill="url(#lensGradient)"/>
-
-  <!-- Lens inner ring -->
-  <circle cx="32" cy="32" r="11" fill="none" stroke="#0277BD" stroke-width="1.5"/>
-
-  <!-- Lens inner details -->
-  <circle cx="32" cy="32" r="8" fill="none" stroke="#00BCD4" stroke-width="1"/>
-
-  <!-- Lens aperture lines -->
-  <line x1="32" y1="22" x2="32" y2="14" stroke="#01579B" stroke-width="1.2" stroke-linecap="round"/>
-  <line x1="42" y1="32" x2="50" y2="32" stroke="#01579B" stroke-width="1.2" stroke-linecap="round"/>
-  <line x1="32" y1="42" x2="32" y2="50" stroke="#01579B" stroke-width="1.2" stroke-linecap="round"/>
-  <line x1="22" y1="32" x2="14" y2="32" stroke="#01579B" stroke-width="1.2" stroke-linecap="round"/>
-
-  <!-- Focus point highlight -->
-  <circle cx="32" cy="32" r="3" fill="#4DD0E1" filter="url(#glow)"/>
-
-  <!-- Flash indicator (top right) -->
-  <rect x="44" y="18" width="6" height="6" rx="1" fill="#FFD54F"/>
-  <rect x="44" y="18" width="6" height="6" rx="1" fill="none" stroke="#FBC02D" stroke-width="0.8"/>
+  <rect x="10" y="18" width="44" height="28" rx="5"
+        fill="#1E1E1E"/>
+
+  <!-- Camera top bump -->
+  <rect x="18" y="14" width="12" height="6" rx="2"
+        fill="#2A2A2A"/>
+
+  <!-- Lens -->
+  <circle cx="32" cy="32" r="10" fill="#2C2C2C"/>
+  <circle cx="32" cy="32" r="7" fill="none" stroke="#555" stroke-width="1.2"/>
+  <circle cx="32" cy="32" r="4" fill="#111"/>
+
+  <!-- Recording red light -->
+  <circle cx="46" cy="22" r="3.5" fill="#FF2D2D" filter="url(#softGlow)">
+    <animate attributeName="opacity"
+             values="1;0.2;1"
+             dur="1.2s"
+             repeatCount="indefinite"/>
+  </circle>
 
-  <!-- WiFi indicator (top left) -->
-  <path d="M16 20 Q18 18 20 18 Q22 18 24 20" stroke="#4DD0E1" stroke-width="1.2" fill="none" stroke-linecap="round"/>
-  <circle cx="20" cy="23" r="0.8" fill="#4DD0E1"/>
 </svg>
diff --git a/static/images/home/cfd-muraly.svg b/static/images/home/cfd-muraly.svg
@@ -2,30 +2,54 @@
      xmlns="http://www.w3.org/2000/svg">
 
   <defs>
-    <!-- Graffiti gradient -->
+    <!-- Animated graffiti gradient -->
     <linearGradient id="muralyGradient" x1="0" y1="0" x2="64" y2="64">
-      <stop offset="0%" stop-color="#FF005C"/>
-      <stop offset="50%" stop-color="#00F5D4"/>
-      <stop offset="100%" stop-color="#FEE440"/>
+      <stop offset="0%" stop-color="#FF005C">
+        <animate attributeName="stop-color"
+                 values="#FF005C;#00F5D4;#FEE440;#FF005C"
+                 dur="4s" repeatCount="indefinite"/>
+      </stop>
+      <stop offset="50%" stop-color="#00F5D4">
+        <animate attributeName="stop-color"
+                 values="#00F5D4;#FEE440;#FF005C;#00F5D4"
+                 dur="4s" repeatCount="indefinite"/>
+      </stop>
+      <stop offset="100%" stop-color="#FEE440">
+        <animate attributeName="stop-color"
+                 values="#FEE440;#FF005C;#00F5D4;#FEE440"
+                 dur="4s" repeatCount="indefinite"/>
+      </stop>
     </linearGradient>
 
-    <!-- Soft glow -->
+    <!-- Pulsing glow -->
     <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur stdDeviation="2" result="blur"/>
+      <feGaussianBlur stdDeviation="2" result="blur">
+        <animate attributeName="stdDeviation"
+                 values="1.5;3;1.5"
+                 dur="2s"
+                 repeatCount="indefinite"/>
+      </feGaussianBlur>
       <feMerge>
         <feMergeNode in="blur"/>
         <feMergeNode in="SourceGraphic"/>
       </feMerge>
     </filter>
   </defs>
 
-  <!-- AR frame corners -->
-  <path d="M8 18V8H18" stroke="#00F5D4" stroke-width="2.5" stroke-linecap="round"/>
-  <path d="M46 8H56V18" stroke="#FF005C" stroke-width="2.5" stroke-linecap="round"/>
-  <path d="M56 46V56H46" stroke="#FEE440" stroke-width="2.5" stroke-linecap="round"/>
-  <path d="M18 56H8V46" stroke="#FF005C" stroke-width="2.5" stroke-linecap="round"/>
+  <!-- AR frame corners (breathing opacity) -->
+  <g>
+    <animate attributeName="opacity"
+             values="0.6;1;0.6"
+             dur="2.5s"
+             repeatCount="indefinite"/>
 
-  <!-- Graffiti "M" stroke -->
+    <path d="M8 18V8H18" stroke="#00F5D4" stroke-width="2.5" stroke-linecap="round"/>
+    <path d="M46 8H56V18" stroke="#FF005C" stroke-width="2.5" stroke-linecap="round"/>
+    <path d="M56 46V56H46" stroke="#FEE440" stroke-width="2.5" stroke-linecap="round"/>
+    <path d="M18 56H8V46" stroke="#FF005C" stroke-width="2.5" stroke-linecap="round"/>
+  </g>
+
+  <!-- Graffiti "M" draw animation -->
   <path d="M18 44
            C18 26 22 22 26 32
            C30 42 34 22 38 32
@@ -34,10 +58,36 @@
         stroke-width="4.5"
         stroke-linecap="round"
         stroke-linejoin="round"
-        filter="url(#glow)"/>
+        filter="url(#glow)"
+        fill="none"
+        stroke-dasharray="120"
+        stroke-dashoffset="120">
+    <animate attributeName="stroke-dashoffset"
+             values="120;0"
+             dur="1.8s"
+             repeatCount="indefinite"/>
+  </path>
+
+  <!-- Spray dots flicker -->
+  <circle cx="24" cy="22" r="1.5" fill="#FF005C">
+    <animate attributeName="opacity"
+             values="0;1;0"
+             dur="1.2s"
+             repeatCount="indefinite"/>
+  </circle>
+
+  <circle cx="42" cy="20" r="1.2" fill="#00F5D4">
+    <animate attributeName="opacity"
+             values="0;1;0"
+             dur="1.5s"
+             repeatCount="indefinite"/>
+  </circle>
+
+  <circle cx="48" cy="34" r="1" fill="#FEE440">
+    <animate attributeName="opacity"
+             values="0;1;0"
+             dur="1.8s"
+             repeatCount="indefinite"/>
+  </circle>
 
-  <!-- Spray dots -->
-  <circle cx="24" cy="22" r="1.5" fill="#FF005C"/>
-  <circle cx="42" cy="20" r="1.2" fill="#00F5D4"/>
-  <circle cx="48" cy="34" r="1" fill="#FEE440"/>
 </svg>
diff --git a/static/images/home/cfd-tomjerry.svg b/static/images/home/cfd-tomjerry.svg
@@ -1 +1,77 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="#FB8C00"><path d="M320 192l17.1 0c22.1 38.3 63.5 64 110.9 64c11 0 21.8-1.4 32-4l0 4 0 32 0 192c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-140.8L280 448l56 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-144 0c-53 0-96-43-96-96l0-223.5c0-16.1-12-29.8-28-31.8l-7.9-1c-17.5-2.2-30-18.2-27.8-35.7s18.2-30 35.7-27.8l7.9 1c48 6 84.1 46.8 84.1 95.3l0 85.3c34.4-51.7 93.2-85.8 160-85.8zm160 26.5s0 0 0 0c-10 3.5-20.8 5.5-32 5.5c-28.4 0-54-12.4-71.6-32c0 0 0 0 0 0c-3.7-4.1-7-8.5-9.9-13.2C357.3 164 352 146.6 352 128c0 0 0 0 0 0l0-96 0-20 0-1.3C352 4.8 356.7 .1 362.6 0l.2 0c3.3 0 6.4 1.6 8.4 4.2c0 0 0 0 0 .1L384 21.3l27.2 36.3L416 64l64 0 4.8-6.4L512 21.3 524.8 4.3c0 0 0 0 0-.1c2-2.6 5.1-4.2 8.4-4.2l.2 0C539.3 .1 544 4.8 544 10.7l0 1.3 0 20 0 96c0 17.3-4.6 33.6-12.6 47.6c-11.3 19.8-29.6 35.2-51.4 42.9zM432 128a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm48 16a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"/></svg>
+<svg width="320" height="120" viewBox="0 0 320 120"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <!-- ================= TOM ================= -->
+  <g transform="translate(40 60)">
+    
+    <!-- walking motion -->
+    <animateTransform
+      attributeName="transform"
+      type="translate"
+      from="-40 60"
+      to="360 60"
+      dur="8s"
+      repeatCount="indefinite" />
+
+    <!-- body -->
+    <ellipse cx="0" cy="0" rx="18" ry="22" fill="#7A8A99"/>
+
+    <!-- head -->
+    <circle cx="0" cy="-28" r="14" fill="#7A8A99"/>
+
+    <!-- ears -->
+    <polygon points="-10,-44 -18,-60 -4,-52" fill="#6E7D8A"/>
+    <polygon points="10,-44 18,-60 4,-52" fill="#6E7D8A"/>
+
+    <!-- legs -->
+    <line x1="-8" y1="22" x2="-14" y2="38" stroke="#555" stroke-width="4">
+      <animate attributeName="y2" values="38;30;38" dur="0.6s" repeatCount="indefinite"/>
+    </line>
+    <line x1="8" y1="22" x2="14" y2="38" stroke="#555" stroke-width="4">
+      <animate attributeName="y2" values="30;38;30" dur="0.6s" repeatCount="indefinite"/>
+    </line>
+
+    <!-- tail -->
+    <path d="M18 8 Q36 14 44 4" stroke="#7A8A99" stroke-width="4" fill="none">
+      <animate attributeName="d"
+               values="M18 8 Q36 14 44 4; M18 8 Q36 0 44 10; M18 8 Q36 14 44 4"
+               dur="1s"
+               repeatCount="indefinite"/>
+    </path>
+  </g>
+
+  <!-- ================= JERRY ================= -->
+  <g transform="translate(20 80)">
+
+    <!-- faster walking -->
+    <animateTransform
+      attributeName="transform"
+      type="translate"
+      from="-20 80"
+      to="360 80"
+      dur="5s"
+      repeatCount="indefinite" />
+
+    <!-- body -->
+    <ellipse cx="0" cy="0" rx="10" ry="14" fill="#C68642"/>
+
+    <!-- head -->
+    <circle cx="0" cy="-16" r="8" fill="#C68642"/>
+
+    <!-- ears -->
+    <circle cx="-8" cy="-20" r="5" fill="#B87333"/>
+    <circle cx="8" cy="-20" r="5" fill="#B87333"/>
+
+    <!-- legs -->
+    <line x1="-4" y1="14" x2="-8" y2="22" stroke="#6D4C41" stroke-width="3">
+      <animate attributeName="y2" values="22;16;22" dur="0.35s" repeatCount="indefinite"/>
+    </line>
+    <line x1="4" y1="14" x2="8" y2="22" stroke="#6D4C41" stroke-width="3">
+      <animate attributeName="y2" values="16;22;16" dur="0.35s" repeatCount="indefinite"/>
+    </line>
+
+    <!-- tail -->
+    <path d="M10 4 Q20 6 26 2" stroke="#C68642" stroke-width="3" fill="none"/>
+  </g>
+
+</svg>
