SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 400;
export default function LittleBoyDriving() {
const [frame, setFrame] = useState(0);
// 动画循环
useEffect(() => {
let animationFrameId;
const loop = () => {
setFrame((f) => f + 1);
animationFrameId = requestAnimationFrame(loop);
};
loop();
return () => cancelAnimationFrame(animationFrameId);
}, []);
// 动画参数计算
const roadSpeed = 8;
Little boy driving a car
Playback pauses when you leave
'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
Playback pauses when you leave
'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
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图配置
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 500;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 轨道参数
const A = 300; // 半长轴
const E = 0.6; // 离心率 (0.6 使得速度差异明显)
const B = A * Math.sqrt(1 - E * E); // 半短轴
const C = A * E; // 焦距 (中心到焦点的距离)
// 动画参数
const ANIMATION_SPEED = 0.015; // 平均角速度因子
const SWEEP_INTERVAL = 1.5; // 扫过区域的时间间隔 (弧度制下的平均近点角跨度)
export const KeplerSecondLawView = ()
Planetary elliptical orbit showing equal swept areas (Kepler's second law)
Playback pauses when you leave
'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
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
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;
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