SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect } from 'react';
// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const HIERARCHY_LAYERS = [
{
id: 'link',
name: '链路层 (Link Layer)',
color: '#8899a6',
bg: '#151a21',
y: 450,
protocols: ['Ethernet', '802.11 Wi-Fi', 'ARP']
},
{
id: 'network',
name: '网络层 (Network Layer)',
color: '#00ccff',
bg: '#0b1e2b',
y: 330,
protocols: ['IPv4', 'IPv6', 'ICMP', 'IPsec', 'OSPF', 'IGM
Network protocol stack
移开即停止播放
'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 3: PROTOCOL DECODING (New)
// ==========================================
const DECODING_FIELDS = [
{ id: 'method', label: 'METHOD', value: 'GET', color: '#00ccff', startLine: 0 },
{ id: 'url', label: 'URL', value: '/api/v1/status', color: '#00ff66', startLine: 1 },
{ id: 'vers
Protocol decoding details
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ==========================================
// VIEW 1: DATA ASSEMBLY
// ==========================================
const GRID_ROWS = 5;
const GRID_COLS = 5;
const TOTAL_PACKETS = GRID_ROWS * GRID_COLS;
const PACKET_SIZE = 40;
const PACKET_GAP = 4;
const SPEED_MULTIPLIER = 0.25;
type PacketStatus = 'queued' | 'transit' | 'assembling' | 'docked
Packet reassembly (v2)
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ============================================================================
// BUBBLE SORT VIEW (Preserved)
// ============================================================================
export const BubbleSortView = () => {
const [arr, setArr] = useState([40, 100, 20, 80, 60, 120, 10, 90]);
const [comparing, setComparing] = useState<number[]>([]);
c
Bubble sort algorithm
移开即停止播放
'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';
// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ==========================================
// PROTOCOL ANALYSIS (Reversed Layer Logic)
// ==========================================
type DetectionMethod = 'port' | 'content';
interface ProtoPacket {
id: number;
x: number;
y: number;
protocol: string; // 'HTTP', 'SSH', 'DNS'
method: DetectionMethod;
binary: string;
po
Network protocol analysis
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ============================================================================
// TCP HANDSHAKE VIEW (Preserved)
// ============================================================================
export const TCPHandshakeView = () => {
const [step, setStep] = useState(0); // 0: Idle, 1: SYN, 2: SYN-ACK, 3: ACK, 4: Connected
useEffect(() => {
const timer