SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
```tsx
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// Constants & Configuration
// ----------------------------------------------------------------------
const VIEW_WIDTH = 600;
const VIEW_HEIGHT = 1000; // 竖屏
const CYCLE_DURATION = 16000; // 完整动画周期 ms
// Color Palette
const COLORS = {
bg: '#0f172a', // Slate 900
ground: '#1e293b', // Slate 800
grid: '#334155', // Slate 700
co
45° 俯视结合轻轴测（isometric-like）视角的
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo } from 'react';
// 动画阶段定义
const STAGES = {
IDLE: 0, // 初始状态
CAR_ENTER: 1, // 车辆入场
BLOCKED: 2, // 遇到闸机，显示无法通行
ZOOM_IN: 3, // 切换到呼叫柱特写
PRESS_BTN: 4, // 按下按钮
CALLING: 5, // 呼叫中
CENTER: 6, // 远程中心接通
BACK_SCENE: 7, // 切回场景
GATE_OPEN: 8, // 抬杆
CAR_EXIT: 9, // 车辆离开
};
// 视觉常量
const VIEW_W = 360;
const VIEW_H = 640;
const COLOR_BG = "#0f172a"; // Slate 900
const COLOR_FLOOR = "#1e293b"; //
二维到轻三维结合的产品功能演示动画， 风格简洁、现代、企业级
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const WIDTH = 1000;
const HEIGHT = 600;
const PADDING = { top: 60, right: 100, bottom: 100, left: 60 };
const CHART_WIDTH = WIDTH - PADDING.left - PADDING.right;
const CHART_HEIGHT = HEIGHT - PADDING.top - PADDING.bottom;
const PRICE_HEIGHT = CHART_HEIGHT * 0.7;
const VOL_HEIGHT = CHART_HEIGHT * 0.25;
const VOL_TOP = PRICE_HEIGHT + 30;
// Helper: Generate realistic market data with a specific narrative
const ge
1. 位置要对：要么是绝对底部（长期下跌后），要么是相对底部
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
export default function OccupationalHealthAnimation() {
// Animation phases:
// 0: Idle/Enter
// 1: Scanning (X-Ray)
// 2: Scan Success/Analysis
// 3: Equipping (Mask + Helmet)
// 4: Mining (Descent)
const [phase, setPhase] = useState(0);
const [scannerY, setScannerY] = useState(100);
const [mineDepth, setMineDepth] = useState(0);
// Ref for animation loop
const frameRef = useRef(0);
创建一个动画小人拍胸部X光或CT检查，之后下矿带口罩
Playback pauses when you leave
import React, { useEffect, useRef, useState, useMemo } from 'react';
const WavePropagationDemo = () => {
const canvasRef = useRef(null);
const containerRef = useRef(null);
const [fps, setFps] = useState(0);
const [modeIndex, setModeIndex] = useState(0);
// Simulation Constants
const SIM_WIDTH = 200; // Lower resolution for performance, scaled up via CSS
const SIM_HEIGHT = 120;
// Scenarios configuration
const scenarios = useMemo(() => [
{
name: "单源传播 (Single S
波的传播演示动画，可以设置很多参数，有干涉、衍射等
Playback pauses when you leave
import React, { useState, useEffect, useMemo } from 'react';
const ModelExplainer = () => {
const [phase, setPhase] = useState(0);
const [timer, setTimer] = useState(0);
// Phases:
// 0: Transformer (Base)
// 1: BERT (Encoder-only)
// 2: T5 (Encoder-Decoder Unified)
// 3: ChatGPT/GPT (Decoder-only)
// 4: Summary/Comparison
const PHASE_DURATION = 8000; // ms per phase
const TOTAL_PHASES = 5;
useEffect(() => {
const interval = setInterval(() => {
setTimer(t =>
帮我讲解trafermer、bert、t5、ChatGPT模
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 COLS = 16;
const ROWS = 10;
const BASE_SPACING = 40;
const START_X = (VIEW_WIDTH - (COLS - 1) * BASE_SPACING) / 2;
const START_Y = (VIEW_HEIGHT - (ROWS - 1) * BASE_SPACING) / 2;
// Animation Phases
const PHASES = [
{ id: 'INIT', text: '初始状态：晶格排列均匀', duration: 2000 },
{ id: 'HEATING', text: '整体加热：热膨胀导致分子间距增大', duration: 3000 },
{ id: 'SURFACE_COOLING'
从分子层面解释一块钢材，由于温度梯度的原因产生残余应力。
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// CONFIGURATION & UTILS
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const GRID_SIZE = 6;
const TILE_WIDTH = 80;
const TILE_HEIGHT = 40; // Isometric squash factor
const Z_SCALE = 12; // Height multiplier
// Synthetic DEM Data (Elevation)
// Designed to form
🌧️ GIS 的集水區分析原理：水，是如何在地形上被「計算
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export default function ScbaTrainingAnimation() {
const [step, setStep] = useState(0); // 0: Intro, 1: Check, 2: Backpack, 3: Mask, 4: Breathe
const [subProgress, setSubProgress] = useState(0);
const [breathingVal, setBreathingVal] = useState(0);
// Animation Loop for continuous effects
useEffect(() => {
let animationFrameId;
const startTime = Date.now();
穿戴空气呼吸器的动画
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 562; // 16:9 Aspect Ratio
const COLOR_BG = '#0f172a';
const COLOR_PINK = '#ff00cc'; // Danganronpa Pink
const COLOR_CYAN = '#00ffff';
const COLOR_YELLOW = '#ffcc00';
const COLOR_WHITE = '#ffffff';
export default function DanganronpaAnimation() {
const [phase, setPhase] = useState(0); // 0: Search, 1: Lock, 2: Fire, 3: Break
const [textIndex, setTextIndex] = useSt
弹丸论破
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// Helper to convert polar to cartesian
const toCartesian = (r, angle) => ({
x: CENTER_X + r * Math.cos(angle),
y: CENTER_Y + r * Math.sin(angle),
});
const PLANETS_CONFIG = [
{
id: 'moon',
name: 'Moon (Luna)',
cnName: '月球',
deferentR: 80,
epicycleR: 0,
defere