SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export const TransformerFlowView = () => {
// 动画状态管理
const [phase, setPhase] = useState(0); // 0: Embed, 1: PosEnc, 2: Attention, 3: AddNorm, 4: FFN, 5: Output
const [tick, setTick] = useState(0);
// 模拟输入数据
const tokens = useMemo(() => [
{ text: "AI", id: 0 },
{ text: "将", id: 1 },
{ text: "改", id: 2 },
{ text: "变", id: 3 },
{ te
大模型transformers的执行流程图
移开即停止播放
```tsx
'use client';
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// simple 8x8 bitmap representations
const CAT_GRID = [
0,0,0,0,0,0,0,0,
0,1,0,0,0,0,1,0, // Ears
1,1,1,0,0,1,1,1,
1,1,1,1,1,1,1,1, // Head
1,0,1,1,1,1,0,1, // Eyes
1,1,1,1,1,1,1,1,
0,1,1,1,1,1,1,0, // Chin
0,0,1,1,1,1,0,0,
];
const DOG_GRID = [
0,0,0,0,0,0,0,0,
0,0,1,1,1,1,0,0, // Head top
0,1,1,1,1,1,1,0,
1,1,1,1,1,1,1,1, // Ears flop
神经网络识别猫狗
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const NODE_WIDTH = 120;
const NODE_HEIGHT = 60;
const GAP = 80;
// 辅助函数：生成随机地址字符串
const randomAddr = () => `0x${Math.floor(Math.random() * 0xffff).toString(16).toUpperCase().padStart(4, '0')}`;
export const LinkedListInsertion = () => {
// 定义初始节点数据
const initialList = [
{ id: 'head', val: 10, x: 100, y: 300, addr: '0x10A4', nextAddr: '0x20B8' },
{ id: 'n2',
链表插入节点的动画
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// x86 Stack Visualization Component
export const X86StackAnimation = () => {
// Animation State
const [stepIndex, setStepIndex] = useState(0);
const [isPlaying, setIsPlaying] = useState(true);
// Simulation Data Definitions
type StackItem = {
id: string;
addr: number;
label: string; // Human readable content
value: string; // Hex/Value
ty
x86下C语言函数调用过程堆栈的变化
移开即停止播放
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 颜色定义 - 赛博朋克/科技风格
const COLORS = {
bg: '#0f172a',
codeBg: '#1e293b',
objectBg: '#334155',
accent: '#38bdf8', // 天蓝
highlight: '#f472b6', // 粉色
vptr: '#a3e635', // 酸橙绿
text: '#e2e8f0',
dimText: '#64748b',
path: '#475569',
gold: '#fbbf24'
};
export const VTableMechanismView = () => {
const [step, setStep] = useState(0);
const totalSteps = 6;
C++虚函数表的工作原理
移开即停止播放
'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)' },
颜色在计算机中的识别原理红、绿、蓝这三个‘通道层’的颜色按比
广告
Ads移开即停止播放
```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 } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ARRAY_SIZE = 15;
// Helper to generate sorted unique random numbers
const generateSortedArray = (size) => {
const set = new Set();
while (set.size < size) {
set.add(Math.floor(Math.random() * 90) + 10);
}
return Array.from(set).sort((a, b) => a - b); // Numeric sort
};
export const BinarySearchView = () => {
// State
const [array, setArray] = useSt
Binary search in computing
移开即停止播放
'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
移开即停止播放
'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
移开即停止播放
'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