SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
```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），叠加精细的青色
移开即停止播放
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 =
雷狱至尊的指尖还跳动着上一道寂灭神雷的电弧，深渊剑魔的剑却已
移开即停止播放
```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:
绘制一个秦朝统一六国的轨迹动画，其他不要做任何变化
移开即停止播放
```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: "北京",
西行漫记
移开即停止播放
'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: "明永乐
制作一个郑和第一次下西洋的轨迹动画，样式保持一致
移开即停止播放
```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
生成一个李白一生的历史轨迹图，包括他去的地方，以及在每个地方
移开即停止播放
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 的思考模型與非思考模型的差異，內容需使用繁體中文
广告
Ads移开即停止播放
```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(()
创建一个葡萄牙、西班牙从大航海时代到三角洲贸易年表动画。要标
移开即停止播放
```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动画，主题为葡萄牙迪亚士、达伽马的
移开即停止播放
```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: "眉山",
创建一个基于宋代古风地图背景的SVG路径动画，视觉风格融合传
移开即停止播放
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