SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
```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';
// -----------------------------------------------------------------------------
// 1. 数据与常量配置
// -----------------------------------------------------------------------------
// 历史节点数据：抗日战争关键战役与进程
const HISTORICAL_EVENTS = [
{
name: "沈阳", year: 1931, type: "start",
要显示完整的中国地图，副标题改为“日本侵华历史轨迹（1931
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 LONG_MARCH_PATH = [
{
name: "瑞金",
year: "1934.10
绘制一个红军长征运动轨迹动画
Playback pauses when you leave
```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 =
基于中国地图，生成河西走廊足迹动画、标题为“汉匈第一次河西之
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';
// -----------------------------------------------------------------------------
// Data: Wu Song's Journey (Water Margin)
// -----------------------------------------------------------------------------
const WU_SONG_PATH = [
{
name: "清河县",
绘制一个<水浒传>里面的武松的轨迹动画
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: Wu Song's Journey (Water Margin)
// -----------------------------------------------------------------------------
const WU_SONG_PATH = [
{ name:
绘制一个水浒传中武松的个人轨迹动画
Playback pauses when you leave
```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)",
绘制一个李白一生的运动轨迹动画
Sponsored
AdsPlayback 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
```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
'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: "明永乐
制作一个郑和第一次下西洋的轨迹动画，样式保持一致
Playback 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
```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: "眉山",