SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Crosshair, Shield, Sword, Wind, Map as MapIcon, Target } from 'lucide-react';
// -----------------------------------------------------------------------------
// Utility & Constants
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const PHASE_DURATION = 5000; // ms per phase
/
创建一个基于SVG的战术演示动画，采用俯瞰视角的古代军事地图
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
// Utility for random numbers (seeded-like behavior for consistency if needed, though simple random is fine here)
const random = (min, max) => Math.random() * (max - min) + min;
// Helper to generate thunder path
const generateThunder = (x1, y1, x2, y2, segments = 10, amp = 20) => {
let d = `M ${x1} ${y1}`;
let cx = x1;
let cy = y1;
const dx = (x2 - x1) / segments;
const dy =
雷狱至尊的指尖还跳动着上一道寂灭神雷的电弧，深渊剑魔的剑却已
Playback pauses when you leave
```javascript
'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';
// -----------------------------------------------------------------------------
// 核心数据：北京-新疆自驾大环线关键节点坐标 (近似坐标)
// -----------------------------------------------------------------------------
const WAYPOINTS = [
// 去程：北京 -> 晋 -> 陕 -> 宁 -> 甘 -> 新
{ name: "北京",
西行漫记
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Brain, Cpu, Zap, ArrowRight, CheckCircle, XCircle, Activity, GitBranch } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
const CENTER_LEFT = WIDTH * 0.25; // 300
const CENTER_RIGHT = WIDTH * 0.75; // 900
const INPUT_Y = 100;
const BRAIN_Y = 300;
const OUTPUT_Y = 600;
// Helper to generate random number
const random = (min, max) => Math.random() * (max - min) + min;
export default function LLMThinkingMod
LLM 的思考模型與非思考模型的差異，內容需使用繁體中文
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Ship, Anchor, Map as MapIcon, Compass, Coins, Skull, Globe, Navigation, Crosshair, Target, Activity } from 'lucide-react';
import * as d3 from 'd3';
const AgeOfDiscoveryTech = () => {
// ---------------------------------------------------------------------------
// 1. 数据配置 (Data Configuration)
// ---------------------------------------------------------------------------
const EVENTS = useMemo(()
创建一个葡萄牙、西班牙从大航海时代到三角洲贸易年表动画。要标
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// Constants & Data
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const ANIMATION_DURATION = 18000; // 18 sec
生成一个大航海时代的svg动画，主题为葡萄牙迪亚士、达伽马的
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// 动画组件：百米赛跑与速度公式演示
export default function SpeedDistanceTimeAnimation() {
// 画布尺寸
const WIDTH = 1200;
const HEIGHT = 700;
// 赛道配置
const TRACK_START_X = 100;
const TRACK_END_X = 1100;
const TRACK_LENGTH = TRACK_END_X - TRACK_START_X; // 1000px 代表 100m
const TRACK_Y_START = 300;
const LANE_HEIGHT = 80;
// 状态定义
const [phase, setPhase] = useState('idle'); // idle, countdown, running, finishe
百米赛跑开始了，运动员跑了一段时间后，观众说小柯跑得最快。制
Sponsored
AdsPlayback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import {
MessageSquare,
Database,
Server,
Cpu,
Globe,
FileText,
Search,
Activity,
Zap,
CheckCircle,
X
} from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// 颜色定义
const COLORS = {
bg: '#0f172a',
primary: '#3b82f6', // 蓝色
mcp: '#06b6d4', // 青色
agent: '#8b5cf6', // 紫色
tool: '#f59e0b', // 琥珀色
success: '#10b981', // 绿色
text: '#e2e8f0',
tex
以下是专为SVG动画设计的结构化脚本，突出**分层架构**、
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// -----------------------------------------------------------------------------
// 配置常量
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const COLORS = {
bg: '#0f172a', // 深蓝灰背景
grid: '#1e293b', // 网格线
primary: '#06b6d4', // 青色 (Cyan) - 主科技色
secondary: '#8b5cf6',// 紫色 (Violet) - 辅助色
accent: '#f43f5e', //
一个LOGO的出现效果动画，LOGO内容“Brian”
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// -----------------------------------------------------------------------------
// Constants & Config
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
const COLOR_BG = '#0f172a'; // Slate 900
const COLOR_PRIMARY = '#0ea5e9'; // Sky 500
const COLOR_SECONDARY = '#6366
做一个小熊的头像（描边），小象外围是扇形的扫描动画，从不完整
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Cpu, Server, Layers, ArrowDown, Search, CheckCircle, Split } from 'lucide-react';
// 常量定义
const WIDTH = 1200;
const HEIGHT = 700;
const COL_WIDTH = 240;
const START_X = 120;
const ORDER_Y = 200;
// 颜色定义
const COLORS = {
bg: '#0f172a',
primary: '#3b82f6',
accent: '#f59e0b',
success: '#10b981',
danger: '#ef4444',
text: '#e2e8f0',
textDim: '#64748b',