SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 颜色定义
const COLORS = {
bg: '#0f172a',
primary: '#3b82f6', // 蓝色
success: '#10b981', // 绿色
danger: '#ef4444', // 红色
warning: '#f59e0b', // 橙色
text: '#e2e8f0',
grid: '#1e293b',
dim: '#475569'
};
// 阶段定义
const STAGES = [
{ id: 0, title: '正常运行 & 本地备份', sub: 'Normal Operation & Local Backup', desc: '数据实时写入本地存储，业务正常访问' },
{ id: 1, title: '异地数据同步', sub:
数据备份和容灾基本概念、分类及原理动画
Playback pauses when you leave
```jsx
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- 常量定义 ---
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 600;
const COLOR_BG = '#0f172a'; // 深色背景 (Slate 900)
const COLOR_CYAN = '#06b6d4'; // 科技蓝 (Cyan 500)
const COLOR_MAGENTA = '#d946ef'; // 霓虹紫 (Fuchsia 500)
const COLOR_GRID = '#1e293b'; // 网格色 (Slate 800)
// --- 辅助 Hook: 动画循环 ---
const useAnimationFrame = (callback) => {
const requestRef = useRef();
const previousTimeRef = useRef();
const
在一个深色渐变背景上，设计一个极简风格的小人奔跑动画。小人由
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 600;
const COLOR_BG = '#0f172a';
const COLOR_ACCENT = '#38bdf8'; // Sky blue / Cyan
const COLOR_ACCENT_2 = '#c084fc'; // Purple
const COLOR_GRID = '#1e293b';
// Helper for animation loop
const useAnimationFrame = (callback) => {
const requestRef = useRef();
const previousTimeRef = useRef();
const animate = time => {
if (previousTimeRef.current != undefined
在一个深色渐变背景上，设计一个极简风格的小人奔跑动画。小人由
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
export const OnlineLearningAnimation = () => {
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 动画状态管理
const [phase, setPhase] = useState(0);
// 0: Connecting (连接中)
// 1: Teacher Speaking (外教提问)
// 2: Student Thinking/Speaking (学员回答)
// 3: Correction/Optimization (纠正/优化)
// 4: Success/Score (完成)
const [waveOffset, se
线上学习外教口语的动画
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 常量定义
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const EARTH_X = 500;
const EARTH_Y = 350;
const ORBIT_RADIUS = 220;
const MOON_RADIUS = 18;
const EARTH_RADIUS = 40;
// 农历关键节点
const KEY_DATES = [
{ day: 1, label: '初一', name: '新月', en: 'New Moon' },
{ day: 3, label: '初三', name: '蛾眉月', en: 'Waxing Crescent' },
{ day: 7, label: '初七', name: '上弦月', en: 'First Quarter' },
{ day: 15, lab
标题：月相变化与月球什么运动有关，设置农历初一、农历初三、农
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ==========================================
// 配置常量
// ==========================================
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const MOON_CYCLE = 29.53;
const COLORS = {
bg: '#0e1b3a',
grid: 'rgba(56, 189, 248, 0.1)',
textMain: '#e2e8f0',
textAccent: '#38bdf8', // 天蓝色高亮
textDim: 'rgba(148, 163, 184, 0.6)',
moonLight: '#f1f5f9',
moonShadow: '#0f172a',
highligh
月相的变化规律，设置农历初一、初三、初五、初七、初十、十五、
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BEAKER_X = VIEW_WIDTH / 2;
const BEAKER_Y = VIEW_HEIGHT / 2 + 50;
const BEAKER_WIDTH = 300;
const BEAKER_HEIGHT = 350;
const WATER_LEVEL = 250; // Height of water from bottom of beaker
// Particle Types
type ParticleType = 'bubble' | 'spark' | 'smoke' | 'trail';
interface Particle {
id: number;
x: number;
y: number;
vx: number;
vy: number;
lif
请生成一个 金属钠在水中发生化学反应的动画
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = 400; // Earth Center X
const CENTER_Y = 300; // Earth Center Y
const ORBIT_RADIUS = 180;
const SUN_X = -100; // Sun is far left
const SUN_Y = 300;
// Phase Data Configuration
const PHASES = [
{ id: 0, name: '新月 (朔)', label: '农历初一', angle: 0, type: 'New Moon' },
{ id: 1, name: '蛾眉月', label: '农历初三', angle: 45, type: 'Waxing Crescent' },
{ id
月相的变化，设置农历初一、农历初三、农历初七、农历十五、农历
Sponsored
AdsPlayback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
const ACCENT_COLOR = "#38bdf8"; // Sky 400
const TEXT_COLOR = "#94a3b8"; // Slate 400
const SUN_COLOR = "#f59e0b"; // Amber 500
const MOON_COLOR = "#e2e8f0"; // Slate 200
const ORBIT_COLOR = "rgba(148, 163, 184, 0.2)";
const LUNAR_PHASES = [
{ day: 1, name: "新月 (朔)", type: "new" },
{ day: 4, name: "蛾眉月", type: "waxing-crescent" },
月相的变化，设置农历初一到三十，30个按钮，点击后中间显示月
Playback pauses when you leave
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 物理/动画参数配置
const CONFIG = {
sunRadius: 45,
earthOrbitRx: 320, // 地球轨道长半轴
earthOrbitRy: 180, // 地球轨道短半轴
earthRadius: 16,
earthSpeed: 0.2, // 地球公转速度
moonOrbitRadius: 40,
moonRadius: 6,
moonSpeed: 2.5, // 月球绕地速度
};
export const SolarSystemView = () => {
const [time, setTime] = useState(0)
创建一个太阳系模型：中心是一个黄色的太阳，地球沿着椭圆轨道围
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const COLORS = {
thesis: '#06b6d4', // Cyan (Thesis)
antithesis: '#f43f5e', // Rose (Antithesis)
synthesis: '#8b5cf6', //