SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const GROUND_Y = 550;
const ROD_WIDTH = 300;
const ROD_HEIGHT = 40;
// Helper: Random range
const random = (min: number, max: number) => Math.random() * (max - min) + min;
// Type definitions
interface Particle {
id: number;
x: number;
y: number;
vx: number;
vy: number;
rotation: number;
vr: number; // angular velocity
color: string;
scale: num
摩擦后从地面吸起小子条
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
// 粒子/纸屑类型定义
interface Scrap {
id: number;
x: number;
y: number;
rotation: number;
color: string;
vx: number;
vy: number;
isStuck: boolean;
stuckOffsetX: number;
stuckOffsetY: number;
mass: number;
}
interface Electron {
id: number;
x: number;
y: number;
targetX: number;
targetY: number;
progress: number;
speed: number;
}
export const Elect
静电摩擦吸附演示 准备材料 塑料直尺 / 梳子、羊毛衫 /
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_WAVE_POINTS = 600;
const SPEED = 0.015;
export const FourierSeriesView = () => {
// Animation state
const [time, setTime] = useState(0);
const [nTerms, setNTerms] = useState(1);
const [wavePath, setWavePath] = useState<{x: number, y: number}[]>([]);
// Refs for animation loop logic to avoid closure staleness
const timeRef = useRef(0);
the principle of Fourier serie
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// x86 Stack Visualization Component
export const X86StackAnimation = () => {
// Animation State
const [stepIndex, setStepIndex] = useState(0);
const [isPlaying, setIsPlaying] = useState(true);
// Simulation Data Definitions
type StackItem = {
id: string;
addr: number;
label: string; // Human readable content
value: string; // Hex/Value
ty
x86下C语言函数调用过程堆栈的变化
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 颜色定义 - 赛博朋克/科技风格
const COLORS = {
bg: '#0f172a',
codeBg: '#1e293b',
objectBg: '#334155',
accent: '#38bdf8', // 天蓝
highlight: '#f472b6', // 粉色
vptr: '#a3e635', // 酸橙绿
text: '#e2e8f0',
dimText: '#64748b',
path: '#475569',
gold: '#fbbf24'
};
export const VTableMechanismView = () => {
const [step, setStep] = useState(0);
const totalSteps = 6;
C++虚函数表的工作原理
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef } from 'react';
// 预设演示的颜色序列 (R, G, B)
const COLOR_SEQUENCE = [
{ r: 255, g: 0, b: 0, name: '红色 (Red)' },
{ r: 0, g: 255, b: 0, name: '绿色 (Green)' },
{ r: 0, g: 0, b: 255, name: '蓝色 (Blue)' },
{ r: 255, g: 255, b: 0, name: '黄色 (Yellow = R+G)' },
{ r: 0, g: 255, b: 255, name: '青色 (Cyan = G+B)' },
{ r: 255, g: 0, b: 255, name: '洋红 (Magenta = R+B)' },
{ r: 255, g: 255, b: 255, name: '白色 (White = R+G+B)' },
颜色在计算机中的识别原理红、绿、蓝这三个‘通道层’的颜色按比
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 800;
// 调色板
const COLORS = {
bg: '#0f172a',
gold: '#fbbf24', // 金色
goldDim: '#b45309',
red: '#dc2626', // 朱红
ink: '#1e293b', // 墨色
text: '#f1f5f9', // 浅灰白
textDim: '#94a3b8'
};
// 官职数据
const LORDS = [
{ id: 'chengxiang', title: '丞相', role: '文官之首 · 行政', x: 250, y: 300, type: 'civil' },
{ id: 'taiwei', title: '太尉', role: '武官之首 · 军事', x: 500, y:
动画主题：三公九卿制度的建立与运作 整体风格 画面风格：中
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 CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 攻击类型定义
type AttackType = 'SQL' | 'XSS' | 'DDoS' | 'SSH' | 'SCAN';
interface Particle {
id: number;
type: AttackType;
x: number;
y: number;
angle: number;
speed: number;
text?: string;
color: string;
distance: number; // 距离中心的距离
}
interface Log {
id: number;
time:
A cloud server is under attack from various cyberattacks
Sponsored
AdsPlayback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Configuration & Constants ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a';
const PRIMARY_COLOR = '#38bdf8'; // Sky blue
const ACCENT_COLOR = '#818cf8'; // Indigo
const SUCCESS_COLOR = '#34d399'; // Emerald
const TEXT_COLOR = '#f8fafc';
const NODE_Y = 300;
// Node Definitions
const NODES = [
{ id: 'user', label: 'User Client', ip: '192.168.1.10', x: 100, type: 'client' }
Animate X-Forwarded-For flow:
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Config
// -----------------------------------------------------------------------------
const WIDTH = 800;
const HEIGHT = 500;
const ORIGIN_X = WIDTH / 2;
const ORIGIN_Y = HEIGHT / 2;
const SCALE_X = 60; // pixels per unit x
const SCALE_Y = 120; // pixels per unit y (amplitude)
const MAX_TERMS = 9; // Number of non-z
Visualize the Taylor series with SVG animation
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
const SCALE = 40; // 40 pixels = 1 unit
// Function Definitions
const FUNCTION_DATA = [
{
id: 'linear',
title: '一次函数 (Linear Function)',
formula: 'y = x',
color: '#3B82F6',
range: [-10, 10],
fn: (x: number) => x,
},
{
id: 'quadratic',
title: '二次函数 (Quadratic F