SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const GLOBE_RADIUS = 220;
const DOT_SIZE = 4;
const COLOR_BG = "#0f172a";
const COLOR_GLOBE_WIRE = "rgba(56, 189, 248, 0.3)"; // Sky blue transparent
const COLOR_GLOBE_FILL = "rgba(15, 23, 42, 0.9)"; // Dark fill to hide back
const COLOR_CITY = "#ffffff";
const COLOR_ROUTE = "#f43f5e"; // Rose
const COLOR_ROUTE_DIM = "rgba(244, 63, 94, 0.2)";
const COLOR_PLANE = "#fbbf24"; /
绘制一个旅游线路图，要有一个3d可旋转的地球，然后可以看到旅
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
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const CENTER_X = WIDTH / 2;
const CENTER_Y = HEIGHT / 2;
const NODE_RADIUS = 220;
// Helper to calculate distance
const dist = (x1, y1, x2, y2) => Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
// Easing function for smooth movement
const easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
export default function SciFiSwitchAnimation() {
// A
科幻感的交换机数据动画
Playback pauses when you leave
```jsx
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import * as Lucide from 'lucide-react';
// ==========================================
// 核心常量配置
// ==========================================
const CONSTANTS = {
WIDTH: 1200,
HEIGHT: 700,
COLORS: {
BG: '#02020A',
GRID: '#00FFFF',
LASER: '#FFFFFF',
TEXT_MAIN: '#E0F2FE',
TEXT_SUB: '#64748B',
ACCENT: '#0EA5E9'
},
POS: {
EMITTER: { X: 150, Y: 350 },
PRISM:
画布背景设定为深邃的午夜蓝（#02020A），叠加精细的青色
Playback pauses when you leave
```jsx
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import * as Lucide from 'lucide-react';
// 动画常量定义
const WIDTH = 1200;
const HEIGHT = 700;
const PRISM_X = 600;
const PRISM_Y = 350;
const EMITTER_X = 100;
const EMITTER_Y = 350;
const SPECTRUM_START_X = 600;
const SPECTRUM_END_X = 1100;
const SPECTRUM_TOP_Y = 150;
const SPECTRUM_BOTTOM_Y = 550;
// 缓动函数
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
const easeOutExpo = (x) => (x === 1 ? 1 : 1 - Math.p
画布背景设定为深邃的午夜蓝（#02020A），叠加精细的青色
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 =
雷狱至尊的指尖还跳动着上一道寂灭神雷的电弧，深渊剑魔的剑却已
Sponsored
AdsPlayback 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: "明永乐
制作一个郑和第一次下西洋的轨迹动画，样式保持一致
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