SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
import React, { useState, useEffect, useMemo, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
// --- Constants & Styles ---
const WIDTH = 1200;
const HEIGHT = 700;
const BG_COLOR = "#0f172a"; // Deep slate background
const TEXT_COLOR = "#f8fafc"; // Slate-50
const COLOR_BIG = "#38bdf8"; // Sky blue
const COLOR_SMALL = "#fb923c"; // Orange
const COLOR_DIFF = "#ef4444"; // Red
const COLOR_AUX = "#64748b"; // Slate-500
const STROKE_WIDTH = 6;
const FONT_FAMILY = '"R
创建一个宽高比为16:9的高清SVG动画，背景色设定为护眼的
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Play, RotateCcw } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// 颜色定义
const COLORS = {
bg: '#0f172a', // 动画背景色
text: '#f8fafc',
large: '#3b82f6', // 深蓝/亮蓝 (大数)
small: '#f97316', // 橙红 (小数)
aux: '#94a3b8', // 灰色辅助线
diff: '#ef4444', // 红色 (差)
highlight: '#fbbf24', // 高亮
};
// 工具函数：生成花括号路径
const makeBrace = (x1, y1, x2, y2, align = 'right', depth = 20) => {
const q = 0.
创建一个宽高比为16:9的高清SVG动画，背景色设定为护眼的
移开即停止播放
```javascript
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// Component: HexiCorridorViz
// -----------------------------------------------------------------------------
export const HexiCorridorViz = () => {
// 1. Constants & Configuration
const WIDTH =
基于中国地图，生成河西走廊足迹动画、标题为“汉匈第一次河西之
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Terminal, Brain, FileCode, Cpu, Layers, Database, Sparkles, MessageSquare } from 'lucide-react';
// -----------------------------------------------------------------------------
// Constants & Config
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const BG_COLOR = '#0f172a'; // Slate 900
const CLAUDE_COLOR = '#D97757'; // Signature O
帮我实现一下 llm 跟 claude code的交互流转动
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
export const CompanyHistoryViz = () => {
// ---------------------------------------------------------------------------
// Constants & Config
// ---------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const I
帮生成一个公司发展历程的动画演示，发展历程信息如下：{
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// Data: Wu Song's Journey (Water Margin)
// -----------------------------------------------------------------------------
const WU_SONG_PATH = [
{
name: "清河县",
绘制一个<水浒传>里面的武松的轨迹动画
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// Constants & Data: Wu Song's Journey (Water Margin)
// -----------------------------------------------------------------------------
const WU_SONG_PATH = [
{ name:
绘制一个水浒传中武松的个人轨迹动画
广告
Ads移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Shield, Users, Server, Database, Globe, Cpu, Activity, Lock, AlertTriangle, Zap, Search } from 'lucide-react';
import * as d3 from 'd3';
// --- Configuration & Constants ---
const WIDTH = 1200;
const HEIGHT = 700;
const CX = WIDTH / 2;
const CY = HEIGHT / 2;
// Visual Palette
const COLORS = {
bg: '#0F172A',
grid: '#1e293b',
friendly: '#06b6d4', // Cyan
hostile: '#d946
创建一个精细的SVG人物关系知识图谱数据可视化动画，画面构图
移开即停止播放
```javascript
import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// Constants & Data: The Life of Li Bai
// -----------------------------------------------------------------------------
const LIBAI_PATH = [
{
name: "Jiangyou (Sichuan)",
绘制一个李白一生的运动轨迹动画
移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const SERVER_X = 250;
const DEVICE_X = 950;
const GROUND_Y = 400;
// 颜色定义
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
serverBase: '#1e40af',
serverHighlight: '#3b82f6',
serverGlow: 'rgba(59, 130, 246, 0.5)',
deviceBase: '#334155',
deviceHighlight: '#94a3b8',
snmp: '#f97316', // Orange
snmpTrap: '#ef4444', // Red
netconf: '#06b6d4', // Cyan
netcon
创建一个扁平化2.5D科技风格的SVG动画，用于演示网络管理
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Play, Pause, RotateCcw, BarChart3, Settings2, Info } from 'lucide-react';
// ==========================================
// Constants & Config
// ==========================================
const WIDTH = 1200;
const HEIGHT = 700;
const ARRAY_SIZE = 40;
const MIN_VAL = 10;
const MAX_VAL = 500;
const BAR_WIDTH = 20;
const GAP = 8;
// Colors
const COLOR