SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
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;
// 使
稀释制冷机
移开即停止播放
```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
单光子探测阵列抗欺骗抗干扰雷达：可应用于雷达对抗激烈的战场环
移开即停止播放
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室内气体检测，研制离子阱痕量气体在线监测装置，实现灵敏
移开即停止播放
```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
量子电磁传感设备，用于检测电流、电磁信号。基于量子效应，相较
移开即停止播放
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);
// 用于强制渲染的帧
傅里叶变换的原理
移开即停止播放
```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 LONG_MARCH_PATH = [
{
name: "瑞金",
year: "1934.10
绘制一个红军长征运动轨迹动画
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Monitor, Cpu, Box, Layers, Activity, Eye } from 'lucide-react';
// ==========================================
// Constants & Configuration
// ==========================================
const WIDTH = 1200;
const HEIGHT = 700;
const BACKGROUND_COLOR = "#0f172a";
const PRIMARY_COLOR = "#0ea5e9"; // Sky blue
const SECONDARY_COLOR = "#6366f1"; // Indigo
const ACCENT_COLOR = "#10b981"; // Emerald
const WARNING_
请生成三维模型LOD制作原理
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const COLOR_BG = '#0f172a';
const COLOR_PRIMARY = '#06b6d4'; // Cyan
const COLOR_SECONDARY = '#8b5cf6'; // Violet
const COLOR_SUCCESS = '#10b981'; // Emerald
const COLOR_TEXT = '#e2e8f0'; // Slate 200
const COLOR_CONSOLE = '#1e293b'; // Slate 800
const COMMAND = "curl -X POST https://api.nexus-core.io/v1/uplink --data-binary @payload.bin";
export default function RadarConsoleAnimation(
A dot shining with radar radia
广告
Ads移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
// --- Constants & Config ---
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const NODE_RADIUS = 24;
const LEVEL_HEIGHT = 90;
const ANIM_SPEED = 1.2; // Speed multiplier (higher is slower)
// Colors
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
text: '#f8fafc',
textSub: '#94a3b8',
redNode: '#ef4444',
redNodeGlow: '#f87171',
blackNode: '#0f172a',
bl
帮我实现一下 红黑树的生成流程
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const BG_COLOR = '#0f172a';
const READER_COLOR = '#38bdf8'; // Sky blue
const GAMER_COLOR = '#e879f9'; // Fuchsia
const STROKE_WIDTH = 6;
// --- Utility Hooks ---
const useAnimationFrame = (callback) => {
const requestRef = useRef();
const previousTimeRef = useRef();
useEffect(() => {
const animate = (time) => {
if (previousTimeRef.current !== undefined) {
con
2个火柴人，一个在看书，一个在打游戏
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Sparkles, CheckCircle, Calculator } from 'lucide-react';
// --- Configuration & Constants ---
const WIDTH = 1200;
const HEIGHT = 700;
const MOUNTAIN_Y_BASE = 550;
// Colors
const C = {
bgTop: '#e0f2fe', // Sky 100
bgBottom: '#fff7ed', // Orange 50 (Warm Beige)
mountainDefault: '#94a3b8', // Slate 400
mountainGold: '#fbbf24', // Amber 400
mountainBrown: '#8