SVG Animation Examples Gallery
Browse featured svg animation examples
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, 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
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);
// 用于强制渲染的帧
傅里叶变换的原理
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, useCallback } from 'react';
import { Play, Pause, RotateCcw, Maximize2, Calculator } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
const CYL_RADIUS = 70;
const CYL_HEIGHT = 180;
const PERSPECTIVE = 0.3; // 椭圆扁平度
const ANIMATION_DURATION = 12000; // 12秒完整演示
export default function CylinderSurfaceArea() {
// 动画核心状态
const [isPlaying, setIsPlaying] = useState(false);
const [isFinished, setIsFinished] = useState(false);
以展开圆柱的所有面，推导出圆柱的表面积动画
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Lightbulb, Zap, Activity, Info, RotateCcw, Power } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// --- Utility Components & Constants ---
const COLORS = {
bg: '#0f172a',
wireOff: '#334155',
wireOn: '#0ea5e9', // Sky blue
bulbOff: '#475569',
bulbOn: '#facc15', // Yellow
bulbBroken: '#ef4444', // Red
text: '#e2e8f0',
accent: '#8b5cf6',
grid: '#1e293b'
};
// SVG Filters f
生成一个中学物理电路的动画，讲解并联与串联区别
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Utilities
// -----------------------------------------------------------------------------
const WIDTH = 1000;
const HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
const PRIMARY_COLOR = '#06b6d4'; // Cyan-500
const SECONDARY_COLOR = '#8b5cf6'; // Violet-500
const ACCENT_COLOR = '#f59e0b'; // Amber-500
const TEXT_COLOR = '#e2e8f0'
周长的原理
Sponsored
AdsPlayback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图常量
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COIL_CENTER_X = VIEW_WIDTH / 2;
const COIL_CENTER_Y = VIEW_HEIGHT / 2;
const COIL_RADIUS = 70;
const COIL_LOOPS = 12;
const COIL_WIDTH = 300;
export default function ElectromagneticInduction() {
// 动画状态
const [animState, setAnimState] = useState({
magnetX: -200, // 磁铁位置
velocity: 0, // 磁铁速度
current: 0, // 感应电流强度
flux: 0,
电磁感应实验
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// --- Constants & Config ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const UNIT = 40; // Pixel size of one grid unit
const A_VAL = 5; // Units for a
const B_VAL = 3; // Units for b
const COLORS = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
gridLine: '#334155', // Slate 700
a: '#06b6d4', // Cyan 500 (a component)
b: '#d946ef', // Fuchsia 500 (b componen
做一个讲解完全平方公式的几何证明动画
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BACKGROUND_COLOR = '#0f172a';
const ACCENT_COLOR = '#38bdf8';
const TEXT_COLOR = '#e2e8f0';
// --- Data & Configuration ---
const ELEMENT_DATA = [
{ z: 1, s: 'H', n: 'Hydrogen', cat: 'Nonmetal', desc: 'The Sun / Fuel', col: 1, row: 1 },
{ z: 2, s: 'He', n: 'Helium', cat: 'Noble Gas', desc: 'Balloons', col: 18, row: 1 },
{ z: 3, s: 'Li', n: 'Lithium', cat: 'Alkali