Add animated SVG with shapes and gradients

tiao2 · web-flow · commit ecdcea4fe71b · 2026-01-02T11:08:15.000+08:00
diff --git a/test.svg b/test.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 200 200">
+  
+  <defs>
+    <radialGradient id="bg" cx="50%" cy="50%" r="70%">
+      <stop offset="0%" stop-color="#1a1a2e"/>
+      <stop offset="100%" stop-color="#16213e"/>
+    </radialGradient>
+    
+    <linearGradient id="shape" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#4f46e5"/>
+      <stop offset="100%" stop-color="#7c3aed"/>
+    </linearGradient>
+    
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  
+  <rect width="200" height="200" fill="url(#bg)"/>
+  
+  <g transform="translate(100, 100)">
+    <path fill="url(#shape)" filter="url(#glow)" stroke="#818cf8" stroke-width="3">
+      <animate attributeName="d" 
+               dur="4s" 
+               repeatCount="indefinite"
+               values="M 50,100 a 50,50 0 1,1 100,0 a 50,50 0 1,1 -100,0;
+                       M 50,50 L 150,50 L 150,150 L 50,150 Z;
+                       M 50,100 a 50,50 0 1,1 100,0 a 50,50 0 1,1 -100,0"
+               keyTimes="0;0.5;1"
+               calcMode="spline"
+               keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"/>
+    </path>
+    
+    <circle cx="0" cy="0" r="3" fill="#ffffff"/>
+  </g>
+  
+  <g transform="translate(100, 180)">
+    <circle cx="-40" cy="0" r="6" fill="#10b981">
+      <animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="1;0.3;1" keyTimes="0;0.5;1"/>
+    </circle>
+    <text x="-40" y="15" text-anchor="middle" fill="#10b981" font-family="Arial" font-size="10">圆形</text>
+    
+    <rect x="5" y="-6" width="12" height="12" fill="#f59e0b">
+      <animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.3;1;0.3" keyTimes="0;0.5;1"/>
+    </rect>
+    <text x="11" y="15" text-anchor="middle" fill="#f59e0b" font-family="Arial" font-size="10">方形</text>
+    
+    <circle cx="50" cy="0" r="6" fill="#10b981">
+      <animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0.3;0.3;1" keyTimes="0;0.5;1"/>
+    </circle>
+    <text x="50" y="15" text-anchor="middle" fill="#10b981" font-family="Arial" font-size="10">圆形</text>
+  </g>
+  
+  <text x="100" y="160" text-anchor="middle" fill="#d1d5db" font-family="Arial" font-size="10">圆形 ↔ 方形 ↔ 圆形</text>
+</svg>
