SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const MOON_RADIUS = 60;
const CYCLE_DURATION = 29.53; // Synodic month in days
// Helper to generate random stars
const generateStars = (count) => {
return Array.from({ length: count }, (_, i) => ({
id: i,
x: Math.random() * VIEW_WIDTH,
y: Math.random() * (VIEW_HEIGHT * 0.7), // Keep stars in the sky
r: Math.random() * 1.5 + 0.5,
opacity: M
Phases of the moon
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// --- HDD Config ---
const PLATES = 4;
const SECTORS_PER_TRACK = 16;
const TRACKS = 8;
const DATA_BLOCK_SIZE = 15;
const BLOCK_GAP = 2;
const DISK_RADIUS = 150;
const DISK_CENTER_X = 250;
const DISK_CENTER_Y = VIEW_HEIGHT / 2;
const ARM_BASE_X = DISK_CENTER_X;
const ARM_BASE_Y = DISK_CENTER_Y + DISK_RADIUS + 50;
const ARM_LENGTH = DISK
Mechanical hard drive seeking process
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef } from 'react';
// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
interface SequenceMessage {
id: number;
type: 'tcp' | 'tls' | 'http' | 'https';
from: 'client' | 'server';
label: string;
detail?: string;
start: number; // ms
dur: number; // ms flight time
color: string;
}
// Config for the two vertical timelines
const HTTP_MSGS: SequenceMessage[] = [
{ id: 1, type: 'tcp', from: 'client', lab
HTTP vs HTTPS
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef } from 'react';
// --- Shared Config ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
interface DPIPacket {
id: number;
x: number;
y: number;
type: 'clean' | 'malicious';
status: 'moving_in' | 'scanning' | 'moving_out_clean' | 'moving_out_threat';
scanProgress: number;
binary: string[];
threatIndex: number; // index of binary line that is malicious
}
export const DPIDetectionView = () => {
const [packets, setPac
Deep Packet Inspection (DPI)
Playback pauses when you leave
'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
Playback pauses when you leave
'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
Playback pauses when you leave
'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
Sponsored
AdsPlayback pauses when you leave
'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)
Playback pauses when you leave
'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
Playback pauses when you leave
'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
Playback pauses when you leave
'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