SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Constants & Helper Functions ---
const WIDTH = 1200;
const HEIGHT = 675; // 16:9 Aspect Ratio
const GROUND_Y = 550;
const FPS = 60;
// Color Palette
const COLORS = {
bg: '#0f172a',
blue: '#38bdf8',
blueGlow: '#0ea5e9',
red: '#f43f5e',
redGlow: '#e11d48',
white: '#ffffff',
text: 'rgba(255, 255, 255, 0.8)',
grid: 'rgba(56, 189, 248, 0.1)',
};
// Math Helpers
const lerp = (start, end, t) =>
兩個火柴人使用各種炫酷技能打架，例：巨大化、招喚黑洞、激光、
Playback pauses when you leave
```tsx
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 诗歌内容配置
const POEM_LINES = [
{ text: "东皋薄暮望", sub: "Gazing from the heights at twilight", duration: 4000 },
{ text: "徙倚欲何依", sub: "Wandering with no one to rely on", duration: 4000 },
{ text: "树树皆秋色", sub: "Every tree is dyed with autumn colors", duration: 4000 },
{ text: "山山唯落晖", sub: "Every mountain reflects the setting sun", duration: 4000 },
请用动画形式展现《野望》这首唐诗的内容，配乐朗诵这首诗
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;
// 物理模拟参数
const ORBIT_TILT = 0.3; // 轨道倾斜度 (0-1), 越小越扁
const TIME_SPEED = 0.5; // 全局时间流速
const TRAIL_LENGTH = 30; // 轨迹长度（段数）
// 行星数据配置
// 增加 rotationSpeed (自转速度), textureType (纹理类型)
const PLANETS_DATA = [
{ name: '水星', en: 'MERCURY', r: 80, size: 5, speed: 2.0, rotationSpeed: 2.0, col
太阳系运动动画。立体。包含运动轨迹。 增加行星的自转。
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 = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 粒子数量
const PARTICLE_COUNT = 150;
// 向量场网格密度
const GRID_COLS = 20;
const GRID_ROWS = 12;
// 辅助函数：生成高斯分布噪声
const randomNormal = (mean: number, std: number) => {
let u = 0, v = 0;
while (u === 0) u = Math.random();
while (v === 0) v = Math.random();
return mean + std * Math.sqrt(-2.0 * M
flow matching 原理的动画
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const PADDING = 60;
const DRAW_AREA_W = VIEW_WIDTH - PADDING * 2;
const DRAW_AREA_H = VIEW_HEIGHT - PADDING * 2;
// 蒙德里安配色方案 (调整为更具科技感的色调)
const COLORS = [
'#f8fafc', // White/Light Grey (Dominant)
'#f8fafc',
'#f8fafc',
'#ef4444', // Tech Red
'#3b82f6', // Tech Blue
'#eab308', // Tech Yellow
'#1e293b', // Dark Grey block
];
// 递归分割算法生成格子
type Blo
我想创造蒙德里安的方格画的随机动态图
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',
client: '#3b82f6', // Blue
server: '#10b981', // Green
network: '#f59e0b', // Amber
text: '#f8fafc',
textDim: '#94a3b8',
code: '#a5b4fc',
binary: '#6366f1'
};
export default function RPCAnimation() {
const [phase, setPhase] = useState('IDLE'); // IDLE, CALL, SERIALIZE_REQ, SEND_REQ, PROCESS, SERIALIZE_RES, SEND_
rpc 的运行流程, 前端后端函数调用, 中间层动画, 使用
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// 视图与布局常量
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_Y = VIEW_HEIGHT / 2;
const OPTICAL_AXIS_Y = CENTER_Y;
// 组件位置定义
const POS_SUBJECT = 120;
const POS_LENS_GROUP = 450;
const POS_SENSOR = 750;
const POS_ISP = 880;
const POS_SCREEN = 960; // 屏幕边缘
// 颜色定义（适配 #e4e6ec 背景）
const COLORS = {
bg: '#e4e6ec',
grid: '#cbd5e1',
text: '#475569',
textLight: '#94a3b8',
primary: '
生成相机拍照的成像原画
Playback pauses when you leave
```tsx
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// CONFIGURATION & CONSTANTS
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 675;
const BG_COLOR = "#0f172a"; // Slate 900
// Palette
const COLORS = {
bg: "#0f172a",
grid: "#1e293b",
text: "#94a3b8",
textLight: "#f1f5f9",
cyan: "#06b6d4",
comfyui生成影片的邏輯原理動畫
Sponsored
AdsPlayback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a';
const ACCENT_COLOR = '#38bdf8'; // Sky 400
const TEXT_COLOR = '#e2e8f0'; // Slate 200
const CODE_BG = '#1e293b'; // Slate 800
// 模拟 DOM 节点数据
const INITIAL_NODES = [
{ id: 'root', label: 'document', type: 'obj', x: 500, y: 60, parent: null },
{ id: 'html', label: 'html', type: 'tag', x: 500, y: 130, parent: 'root' },
生成一個javascript操作dom樹的動畫
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 颜色定义 - 科技感配色
const COLORS = {
bg: '#0f172a', // 背景色
primary: '#38bdf8', // 主梯形颜色 (天蓝)
secondary: '#a78bfa', // 复制梯形颜色 (紫)
accent: '#facc15', // 强调色 (黄)
text: '#e2e8f0', // 文本颜色
grid: '#1e293b', // 网格线
dim: '#475569', // 暗淡色
};
export default function TrapezoidAreaProof() {
const [step, setStep] = useState(0);
我是小学数学教师，我要做一个梯形面积的证明过程，帮我输出。简
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 硬件位置定义
const POS = {
SSD: { x: 150, y: 450, w: 160, h: 80 },
RAM: { x: 500, y: 300, w: 180, h: 60 },
CPU: { x: 250, y: 100, w: 140, h: 140 },
GPU: { x: 750, y: 100, w: 200, h: 100 },
};
// 动画阶段定义
type Phase = 'IDLE' | 'SSD_READ' | 'SSD_TO_RAM' | 'RAM_PROCESS' | 'RAM_DISTRIBUTE' | 'PROCESSING' | 'COMPLETE';
export default function HardwareSystemAnimation() {