SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const PADDING = 60;
const STEP_INTERVAL = 500; // ms
// 颜色配置
const COLORS = {
bg: '#0f172a', // slate-900
grid: '#334155', // slate-700
axis: '#94a3b8', // slate-400
line: '#3b82f6', // blue-500
lineGlow: '#60a5fa', // blue-400
dot: '#22d3ee', // cyan-400
text: '#cbd5e1', // slate-300
positive: '#10b981', // emerald-500
请生成一个简洁、美观、信息清晰的 SVG 动画，用于可视化抛
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;
// 模拟数据：行星参数
// speed: 轨道角速度 (相对值)
// distance: 距离中心的半径
// size: 行星大小
// color: 基础色
// name: 中文名
const PLANETS = [
{ id: 'mercury', name: '水星', distance: 90, size: 6, speed: 2.5, color: '#A5A5A5', offset: 0 },
{ id: 'venus', name: '金星', distance: 130, size: 10, speed: 1.8, color: '#E3BB76', o
High-quality astronomical simu
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图常量定义
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ORIGIN_X = 500; // 原点屏幕X
const ORIGIN_Y = 100; // 原点屏幕Y (因为开口向下，顶点在上方，预留上方空间)
const SCALE_X = 60; // X轴缩放比例
const SCALE_Y = 12; // Y轴缩放比例 (Y轴数值变化大，压缩显示)
export default function ParabolaGeometryAnimation() {
const [m, setM] = useState(-5);
const requestRef = useRef<number>();
const startTimeRef = useRef<number>();
// 动画循
在平面直角坐标系中，抛物线y=-x^2+2x+3的对称轴为直
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef } from 'react';
const TokenTheftAnimation = () => {
// 状态定义
// 0: 初始化 / 等待
// 1: 正常登录 (发送账号密码)
// 2: 获取凭证 (Server -> User: Token)
// 3: 场景切换 (浏览直播/网页)
// 4: 触发陷阱 (点击恶意链接)
// 5: 脚本扫描 (后台静默扫描)
// 6: 窃取凭证 (Token 被复制并发往黑客)
// 7: 异地顶号 (黑客使用 Token 登录)
// 8: 攻击完成 (用户掉线/被劫持)
const [phase, setPhase] = useState(0);
// 动画元素位置与状态
const [userPacket, setUserPacket] = useState({ x: 150, y: 400, opacity: 0, label: '' });
con
原理：当你登录微信（或其他APP）时，服务器会给你发一个像“
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useMemo, useRef } from 'react';
// ----------------------------------------------------------------------
// constants & types
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLOR_BG = '#0f172a'; // Slate-900
const COLOR_ACCENT = '#06b6d4'; // Cyan-500
const COLOR_ODD = '#ef4444'; // Red-500
const COLOR_EVEN = '#10b981'; // Emerald-500
const COLOR_TEXT = '#f8fafc
题干图形依次为：“五角星”“箭头嵌套图形”“类似‘日’字变形
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Config
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const GROUND_Y = 500;
const RUNNER_X = 300; // Runner's horizontal position
const COLOR_BG = "#0f172a"; // Slate-900
const COLOR_ACCENT_1 = "#06b6d4"; // Cyan
const COLOR_ACCENT_2 =
在一个深色渐变背景上，设计一个极简风格的小人奔跑动画。小人由
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 CENTER_X = VIEW_WIDTH / 2;
// Colors
const COLOR_BG = '#0f172a';
const COLOR_P_BG = 'rgba(236, 72, 153, 0.1)'; // Pink tint
const COLOR_N_BG = 'rgba(6, 182, 212, 0.1)'; // Cyan tint
const COLOR_HOLE = '#ec4899'; // P-type carrier (+)
const COLOR_ELECTRON = '#06b6d4'; // N-type carrier (-)
const COLOR_ION_NEG = '#9d174d'; // Fixed acceptor (-)
const COLOR_I
講解電子學 pn半導體的結合
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef } from 'react';
export default function PhpTransportAnimation() {
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 400;
// Animation States: 'IDLE', 'PREPARE_GET', 'SEND_GET', 'PROCESS_GET', 'PREPARE_POST', 'SEND_POST', 'PROCESS_POST'
const [phase, setPhase] = useState('IDLE');
const [progress, setProgress] = useState(0); // 0 to 1 for movement
const requestRef = useRef<number>();
const startTimeRef = useRef<number>();
php 中 post get 怎麼傳輸
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 粒子系统配置
const MAX_BUBBLES = 60;
const MAX_STEAM = 40;
interface Particle {
id: number;
x: number;
y: number;
size: number;
speed: number;
wobbleOffset: number;
opacity: number;
}
export const BoilingWaterSimulation = () => {
// 仿真状态
const [temperature, setTemperature] = useState(20);
const [time, setTime] = useState(0);
const [phase, se
标准大气压下水的沸腾过程
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 LOCATIONS = {
BEIJING: { x: 580, y: 180, label: 'Beijing (北京)', color: '#fbbf24' }, // Gold
SHANGHAI: { x: 650, y: 320, label: 'YRD (长三角)', color: '#38bdf8' }, // Cyan
SHENZHEN: { x: 560, y: 450, label: 'GBA (大湾区)', color: '#38bdf8' },
CHENGDU: { x: 380, y: 300, la
北京在地里位置的重要性，侧重经济方面
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CX = VIEW_WIDTH / 2;
const CY = VIEW_HEIGHT / 2;
// 行星配置数据
const PLANETS = [
{ name: '水星', en: 'Mercury', r: 4, orbitR: 60, speed: 4.1, color: ['#a1a1aa', '#52525b'] },
{ name: '金星', en: 'Venus', r: 7, orbitR: 90, speed: 2.6, color: ['#fde047', '#ca8a04'] },
{ name: '地球', en: 'Earth', r: 7.5, orbitR: 130, speed: 2.0, color: ['#3b82f6', '#1d4ed8'] },