SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'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)' },
颜色在计算机中的识别原理红、绿、蓝这三个‘通道层’的颜色按比
移开即停止播放
'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:
动画主题：三公九卿制度的建立与运作 整体风格 画面风格：中
移开即停止播放
```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
移开即停止播放
'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:
移开即停止播放
'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
移开即停止播放
'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
Animated plots of linear, quadratic, inverse, exponential, logarithmic, trigonometric and heart functions
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 辅助函数：求解开普勒方程 M = E - e * sin(E)
// 使用牛顿迭代法求解偏近点角 E
const solveKepler = (M: number, e: number) => {
let E = M;
for (let i = 0; i < 5; i++) {
E = E - (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E));
}
return E;
};
export const KeplerLawAnimation = () => {
// 动画状态：Mean Anomaly (平近点角)，随时间线性增加
const [meanAnomaly, setMeanAnomaly] = useState(0);
Planetary elliptical orbit showing equal swept areas (Kepler's second law)
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
export default function CvsJavaAnimation() {
// Animation phases:
// 0: Init
// 1: Java Showing Off (Kung Fu)
// 2: C Draws Weapon
// 3: C Fires (Beam)
// 4: Java Sliced (Impact)
// 5: Pause before reset
const [phase, setPhase] = useState(0);
const [time, setTime] = useState(0); // Used for continuous animations (waving)
// Animation Loop for continuous movement (Java's wavy motion)
useEffect(()
Stick-figure duel: C vs Java
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const BASE_PAIRS_COUNT = 24;
const HELIX_RADIUS = 100;
const HELIX_HEIGHT = 460;
const ROTATION_SPEED = 0.02;
export const DnaHelixAnimation = () => {
const [rotation, setRotation] = useState(0);
const requestRef = useRef<number>();
// Animation Loop
const animate = () => {
setRotation(prev => prev + ROTATION_SPEED);
requestRef.current = requestA
Rotating DNA double helix (sine waves and base pairs)
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useCallback } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const WATER_LEVEL = 250;
const ELECTRODE_Y_START = 150;
const ELECTRODE_HEIGHT = 350;
const CATHODE_X = 280; // Left, Negative, Hydrogen
const ANODE_X = 520; // Right, Positive, Oxygen
// Types
type ParticleType = 'H2O' | 'H2' | 'O2' | 'Electron';
interface Particle {
id: number;
x: number;
y: number;
type: ParticleType;
scale: number;
opacity:
Electrolysis of water into hydrogen and oxygen
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const EARTH_RADIUS = 140; // 稍微调大一点，更有气势
const ORBIT_RADIUS = 240;
// 3D 投影辅助函数
const project = (x: number, y: number, z: number) => {
const fov = 600;
const scale = fov / (fov + z);
return {
x: x * scale + VIEW_WIDTH / 2,
y: y * scale + VIEW_HEIGHT / 2,
scale: scale,
z: z
};
};
export default function NewsIntroAnimation() {
// 动画阶段: 0: