update

src/components/BaseLogoSvg.vue

@@ -2,13 +2,22 @@
   <svg 
     viewBox="0 0 32 32" 
     xmlns="http://www.w3.org/2000/svg"
-    v-bind="$attrs"
+    :class="{ 'is-animated': animated }"
+    class="base-logo-svg"
   >
     <defs>
-      <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="logo-gradient">
-        <stop stop-color="#2AABEE" offset="0%"></stop>
-        <stop stop-color="#229ED9" offset="100%"></stop>
-      </linearGradient>
+      <radialGradient id="logo-gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+        <stop offset="0%" stop-color="white" />
+        <stop offset="25%" stop-color="var(--q-primary, #1976D2)" stop-opacity="0.5" />
+        <stop offset="50%" stop-color="var(--q-primary, #1976D2)">
+          <animate 
+            attributeName="offset" 
+            values="1;0.6;1" 
+            dur="6s" 
+            repeatCount="indefinite" 
+          />
+        </stop>
+      </radialGradient>
     </defs>
 
     <rect class="logo-bg" width="32" height="32" rx="4" ry="4" fill="url(#logo-gradient)" />
@@ -26,8 +35,35 @@
   </svg>
 </template>
 
-<script setup lang="ts">
-  defineOptions({
-    inheritAttrs: false
-  })
+<script setup>
+defineProps({
+  animated: {
+    type: Boolean,
+    default: true
+  }
+})
 </script>
+
+<style lang="scss" scoped>
+.base-logo-svg {
+  .x, .c { transform-box: fill-box; }
+  .l { stroke-width: 1.5; }
+
+  &.is-animated {
+    .x { animation: expand-r 6s infinite; }
+    .c { animation: o 6s infinite; }
+    .l {
+      stroke-dasharray: 1;
+      stroke-dashoffset: 1;
+      animation: draw 6s infinite;
+    }
+  }
+}
+
+@keyframes expand-r { 50% { r: 8px; } }
+@keyframes o { 50% { transform: var(--t); } }
+@keyframes draw {
+  0%, 100% { stroke-dashoffset: 0; }
+  50% { stroke-dashoffset: 1; }
+}
+</style>