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, useRef, useMemo, useCallback } from 'react';
// ----------------------------------------------------------------------
// CONFIGURATION & CONSTANTS
// ----------------------------------------------------------------------
const WIDTH = 1600;
const HEIGHT = 900;
const CENTER_X = WIDTH / 2;
const CENTER_Y = HEIGHT / 2;
// Colors
const C_LEFT_BG = '#E5E7EB';
const C_LEFT_FG = '#374151'; // Dark gray for lines/text
const C_LEFT_ACCE
SVG画布尺寸设定为16:9，中间以半透明虚线分割。左半部分
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Zap, Activity, Battery, Anchor, Search, Cpu, Wifi, AlertTriangle } from 'lucide-react';
// ----------------------------------------------------------------------
// Constants & Config
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BG_COLOR = "#0f172a";
const ACCENT_COLOR = "#3b82f6";
const SENSO
* 原理：利用铷原子传感器，基于原子自旋极化和磁共振原理的高
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const WIDTH = 1000;
const HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
const PRIMARY_COLOR = '#06b6d4'; // Cyan
const SECONDARY_COLOR = '#8b5cf6'; // Violet
const ACCENT_COLOR = '#f43f5e'; // Rose
const TEXT_COLOR = '#e
离子阱检测气体和液体的动画
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Zap, Activity, Battery, Waves, Cpu, Search, AlertTriangle, CheckCircle2 } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// -----------------------------------------------------------------------------
// Utils & Constants
// -----------------------------------------------------------------------------
const COLORS = {
bg: '#0f172a',
primary: '#06b6d4', // Cyan
secondary: '#8b5cf6', // Violet
a
磁探头传感器
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Wind, CloudRain, Factory, AlertTriangle, Activity, Thermometer, Droplets, Zap, Gauge, Radio } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
const CENTER_X = WIDTH / 2;
const CENTER_Y = HEIGHT / 2;
// 配色方案
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
primary: '#38bdf8', // 量子蓝
water: '#06b6d4', // 水汽
carbon: '#10b981', // 碳
methane: '#f59e0b', // 甲烷
haze: '#8b5cf6',
量子微气象站
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Thermometer, Cpu, Zap, Activity, Snowflake } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// 辅助函数：生成随机数
const random = (min, max) => Math.random() * (max - min) + min;
// 粒子组件：用于表现热噪声
const ThermalParticle = ({ x, y, tempRatio, time, id }) => {
// tempRatio: 1.0 (300K) -> 0.0 (10mK)
// 粒子速度和范围随温度降低而减小
const speed = 0.5 + tempRatio * 4.0;
const range = 2 + tempRatio * 30;
// 使
稀释制冷机
Sponsored
AdsPlayback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ==========================================
// 常量与配置
// ==========================================
const WIDTH = 1200;
const HEIGHT = 700;
const COLOR_BG = '#0f172a'; // 深蓝底色
const COLOR_GRID = '#1e293b'; // 网格线
const COLOR_PRIMARY = '#06b6d4'; // 青色 (雷达主色)
const COLOR_ACCENT = '#3b82f6'; // 蓝色 (数据/装饰)
const COLOR_WARN = '#ef4444'; // 红色 (干扰/敌情)
const COLOR_SUCCESS = '#10b981'; // 绿色 (锁定/安全)
c
单光子探测阵列抗欺骗抗干扰雷达：可应用于雷达对抗激烈的战场环
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const BG_COLOR = '#0f172a'; // Slate-900
const PRIMARY_COLOR = '#38bdf8'; // Sky-400
const ACCENT_COLOR = '#f472b6'; // Pink-400
const SUCCESS_COLOR = '#4ade80'; // Green-400
const WARNI
GIS室内气体检测，研制离子阱痕量气体在线监测装置，实现灵敏
Playback pauses when you leave
```tsx
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Zap, Activity, Battery, Waves, Cpu, Search, AlertTriangle, CheckCircle2, Radio, Server, Anchor } from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// Configuration & Constants
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const FPS = 60;
const COL
量子电磁传感设备，用于检测电流、电磁信号。基于量子效应，相较
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const BACKGROUND_COLOR = '#0f172a';
const PRIMARY_COLOR = '#0ea5e9'; // Sky blue
const SECONDARY_COLOR = '#8b5cf6'; // Violet
const ACCENT_COLOR = '#f59e0b'; // Amber
const TEXT_COLOR = '#e2e8f0';
export default function FourierTransformAnimation() {
// 核心动画状态
// harmonicsCount: 当前叠加的正弦波数量 (1, 3, 5, 7, 9...)
const [harmonicsCount, setHarmonicsCount] = useState(1);
// 用于强制渲染的帧