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
```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';
// -----------------------------------------------------------------------------
// 数据定义：毛泽东生平关键节点 (1893-1976)
// -----------------------------------------------------------------------------
const MAO_PATH = [
{ name: "湖南韶山", year: 1893, type: "birth", desc: "189
毛泽东生平地理名称时间线（1893-1976） 时间段 地点
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, useLayoutEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// Constants & Data
// -----------------------------------------------------------------------------
// 秦灭六国顺序：韩 -> 赵 -> 魏 -> 楚 -> 燕 -> 齐
const QIN_PATH = [
{ name:
绘制一个秦朝统一六国的轨迹动画，其他不要做任何变化
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
'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
// -----------------------------------------------------------------------------
const VOYAGE_PATH = [
{ name: "刘家港", year: 1405, type: "departure", desc: "明永乐
制作一个郑和第一次下西洋的轨迹动画，样式保持一致
Sponsored
AdsPlayback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { MapPin, Scroll, Wind, Play, Pause, RefreshCw, ChevronRight, BookOpen } from 'lucide-react';
import * as d3 from 'd3';
// --- Configuration & Data ---
const WIDTH = 1200;
const HEIGHT = 700;
const ANIMATION_SPEED_BASE = 0.5; // Base movement speed
// Li Bai's Journey Data (Approximate Coordinates for 1200x700 Canvas)
// Coordinates are manually tuned to resemble a stylized map of China with
生成一个李白一生的历史轨迹图，包括他去的地方，以及在每个地方
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
```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: Su Shi's Life Journey
// -----------------------------------------------------------------------------
const SU_SHI_PATH = [
{
name: "眉山",