文字 SVG 动画生成器

创建一个名为 "Confetti Pop"（彩纸喷射）的 HTML+CSS+SVG 动画。 主文字 "SvgAnimate" 使用 'Bowlby One' 72px，深海军蓝填充 + 3px 黄色描边（paint-order: stroke）。 背后再放一个粉色"阴影"副本，偏移 translate(6px, 6px)。 对主文字应用 2s ease-in-out 心跳式缩放/旋转动画： 0%/100%: scale(1) rotate(-1deg) 25%: scale(1.08) rotate(2deg) 50%: scale(0.96) rotate(-2deg) 75%: scale(1.04) rotate(1deg) 用 JavaScript 在 SVG 顶部随机 x 位置注入约 28 个彩纸碎片（混合 <rect>、<circle>、三角形 <polygon>），每片从 7 色派对调色板取随机色，并加 1px 黑色描边。 每片彩纸：3s ease-in 无限循环，从 y=-120 飘落至 y=180，同时旋转 720° 并淡入淡出。每片有随机 animation-delay (0-3s) 和 animation-duration (2.5-4s)，更自然。 背景：linear-gradient(135deg, #ffeeee 0%, #fff5e6 100%)。卡片黑色边框 + 投影。

创建一个名为 "Wiggle Stamp"（抖动印章）的 HTML+CSS+SVG 动画。 紫色矩形"印章"（rect，rx=20，紫色填充，4px 黑色描边）倾斜 -3deg，内部白色文字 "SvgAnimate"（Bowlby One 52px）。 印章本身：2s ease-in-out 缩放脉冲 1 → 1.05 → 1，始终保持 -3deg 倾斜。 内部文字：0.4s 快速手颤抖动——rotate(-3deg) → rotate(-2deg) → rotate(-4deg) → rotate(-3deg)，附带 ±1px 微小 translateX，模拟用力盖章时的颤动。 印章周围装饰橙色"光线"（8 条短粗线）：stroke-width 4，stroke-linecap round，1s ease-in-out 透明度 + 缩放脉冲（0.4 → 1 → 0.4），表达冲击力/兴奋感。 左右各放一颗黑边小红心，0.8s 循环跳动（scale 1 → 1.3），错开延迟。 背景：浅薰衣草色。卡片黑色边框 + 厚重投影。

创建一个名为 "Neon Glow"（霓虹辉光）的 HTML+CSS+SVG 招牌动画。 背景：极深紫 #0e0a1f。 文字 "SvgAnimate" 使用 'Bungee' 64px，填充深紫黑 #2a0f3a，描边热粉 #ff5b9e（1.5px，paint-order: stroke）。 SVG <filter id="neonGlow"> 由两层 feGaussianBlur（stdDeviation 3 + stdDeviation 6）通过 feMerge 叠加，应用到文字——形成霓虹的柔和光晕。 应用 3.5s linear 无限循环闪烁关键帧，模拟故障霓虹灯——大部分时间不透明度为 1，随机短暂跌至 0.3-0.6 并伴随亮度波动（在 3%、6%、7%、18%、19%、52%、53% 处使用类似 steps 的时序）。 四角添加 4 段小弯曲"霓虹管"路径（青色 + 黄色交替），每段各有略微不同的闪烁时长（2.7s、4.1s），使闪烁不同步。 文字背后放一个柔和粉色 radialGradient 椭圆，应用 bgPulse 动画（3s 缩放 1 → 1.08 + 不透明度 0.3 → 0.6）作为环境辉光。 卡片配低调深色边框。

创建一个名为 "Liquid Fill"（液体填充）的 HTML+CSS+SVG 动画，文字内部水位起伏。 文字 "SvgAnimate" 使用 'Bowlby One' 76px： - 外轮廓层：fill: none，stroke: 深海军蓝 4px，stroke-linejoin: round（始终可见）。 - 内部剪切层：使用同样的文字副本作为 <clipPath id="liquidTextClip">。 在剪切区域内绘制波浪状水形： - 用 SVG <path> 绘制平滑的水平正弦波形多边形，填充 linearGradient（青色 #4cc9f0 → 靛蓝 #5e60ff，垂直渐变）。 - 应用 4s ease-in-out 关键帧：translateY(60px) → translateY(-25px) → translateY(60px)——水位起伏。 - 在波形上叠加嵌套 2s translateX(-40px) 抖动，制造横向摇摆。 文字下方添加 5 个小青色气泡（circles），3s ease-in 从 y=160 升至 y=80，缩放 0 → 1 并淡出。 卡片黑色边框 + 厚实投影。

创建一个名为 "Black Hole Twist"（黑洞扭曲）的 HTML+CSS+SVG 动画。 背景：深空径向渐变，中心 #1a0033 → 边缘 #0a0014。 "SvgAnimate" 每个字母都设置自己的 CSS 自定义属性 --dx 与 --dy，指向中心（如左侧字母 +x，右侧字母 -x）。 对每个字母应用 3s cubic-bezier(0.55, 0, 0.7, 0.2) 无限循环关键帧： 0-8%: 静止于 translate(0,0) rotate(0) scale(1) opacity 1 50%: translate(var(--dx), var(--dy)) rotate(360deg) scale(0.3)——边旋转边被吸向中心 65%: 完全 scale(0) opacity 0——消失 80%: 保持隐藏 92%: scale(1.15)——突然现身 100%: 静止 中心黑色圆 <circle class="hole"> 动画：scale 0 → 1 → 0，与吸入周期同步。 3 圈彩色吸积环（紫/粉/青）：仅描边圆，应用 ringSpin 关键帧：scale 0 → 1 → 1.3 + rotate 0 → 720° + 淡出（错开 0.3s、0.6s）。 背景点缀约 8 个白色小星点。 深色卡片。