SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 5x7 Pixel grids for digits 0-9
const DIGIT_PATTERNS = {
0: [
0,1,1,1,0,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
0,1,1,1,0
],
1: [
0,0,1,0,0,
0,1,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,1,1,1,0
],
2: [
0,1,1,1,0,
1,0,0,0,1,
0,0,0,0,1,
0,0,0,1,0,
0,0,1,0,0,
0,1,0,0,0,
1,1,1,1,1
],
3: [
神经网络识别手写数字过程
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_Y = 320;
const FRONT_X = 300;
const REAR_X = 750;
// 辅助函数：生成齿轮路径
const createGearPath = (cx: number, cy: number, radius: number, teeth: number, holeRadius: number = 0) => {
const outerRadius = radius;
const innerRadius = radius * 0.85;
const hole = holeRadius > 0 ? ` M ${cx} ${cy - holeRadius} A ${holeRadius} ${holeRadius} 0 1 0 ${cx} ${cy + h
我要自行车齿轮运动的原理
移开即停止播放
'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
移开即停止播放
'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)' },
颜色在计算机中的识别原理红、绿、蓝这三个‘通道层’的颜色按比
移开即停止播放
```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';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_Y = VIEW_HEIGHT / 2;
const CIRCLE_X = 150;
const WAVE_START_X = 300;
const RADIUS = 80;
export const SineWaveView = () => {
// 动画相位状态
const [phase, setPhase] = useState(0);
const requestRef = useRef<number>();
const previousTimeRef = useRef<number>();
// 动画循环
const animate = (time: number) => {
if (previousTimeRef.current !== undefi
Sine wave extending forward on axes
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const BALL_RADIUS = 30;
const STRING_LENGTH = 250;
const PIVOT_Y = 100;
const CENTER_X = VIEW_WIDTH / 2;
const MAX_ANGLE = Math.PI / 4; // 45 degrees swing
export const NewtonsCradle = () => {
const [time, setTime] = useState(Math.PI); // Start with left ball ready to swing down
const requestRef = useRef<number>();
// Physics loop
const animate = () => {
//
Newton's cradle with 5 metal balls
移开即停止播放
'use client';
import React, { useMemo, useEffect, useState } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
export const BlackHoleAnimation = () => {
// 生成背景星空
const stars = useMemo(() => {
return Array.from({ length: 150 }).map((_, i) => ({
id: i,
x: Math.random() * VIEW_WIDTH,
y: Math.random() * VIEW_HEIGHT,
r: Math.random() * 1.5 + 0.5,
opacity: Math.random() * 0.7 + 0.3
Black hole with accretion disk
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ============================================================================
// 1. FIREWALL VISUALIZATION (High Fidelity Replica)
// ============================================================================
// --- Constants & Types ---
interface PacketData {
id: number;
x: number;
y: number;
ip: string;
port: number;
type: 'normal' | 'maliciou
Firewall packet filtering
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ==========================================
// VIEW 4: FILE RECONSTRUCTION (Refined Matrix)
// ==========================================
const MATRIX_ROWS = 8;
const MATRIX_COLS = 10;
const TOTAL_BLOCKS = MATRIX_ROWS * MATRIX_COLS;
const HEADER_ROWS = 2;
const BLOCK_SIZE = 30;
const BLOCK_GAP = 4;
const HTTP_HEADERS = [
{ key: '
File restoration process
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ============================================================================
// SOLAR SYSTEM VIEW (New High Fidelity)
// ============================================================================
interface PlanetConfig {
name: string;
radius: number; // size of the planet
distance: number; // distance from sun
speed: number; // orbital speed factor