SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Play, Pause, RotateCcw, BarChart3, Settings2, Info } from 'lucide-react';
// ==========================================
// Constants & Config
// ==========================================
const WIDTH = 1200;
const HEIGHT = 700;
const ARRAY_SIZE = 40;
const MIN_VAL = 10;
const MAX_VAL = 500;
const BAR_WIDTH = 20;
const GAP = 8;
// Colors
const COLOR
绘制七大经典排序的动画原理图，要有按钮来切换要看的排序原理
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const CENTER_X = WIDTH / 2;
const CENTER_Y = HEIGHT / 2;
const NODE_RADIUS = 220;
// Helper to calculate distance
const dist = (x1, y1, x2, y2) => Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
// Easing function for smooth movement
const easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
export default function SciFiSwitchAnimation() {
// A
科幻感的交换机数据动画
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
export default function MetasploitHack() {
// ---------------------------------------------------------------------------
// State & Refs
// ---------------------------------------------------------------------------
const [logs, setLogs] = useState([]);
const [progress, setProgress] = useState
Hackers used the Metasploit Fr
移开即停止播放
```tsx
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { FileCode, Database, Cpu, ArrowRight, Binary, Layers } from 'lucide-react';
// --- Configuration ---
const WIDTH = 1200;
const HEIGHT = 700;
const COLORS = {
bg: '#0f172a', // Deep Space
panel: '#1e293b', // Slate 800
panelBorder: '#334155',
grid: 'rgba(148, 163, 184, 0.1)',
text: '#f1f5f9',
textDim: '#94a3b8',
prim
生成一个能解释“protobuf是如何将一个结构化数据序列化
移开即停止播放
```tsx
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// --- Configuration & Constants ---
const WIDTH = 1200;
const HEIGHT = 700;
const COLORS = {
bg: '#0f172a', // Deep Space
panelBg: '#1e293b', // Dark Slate
grid: '#334155', // Grid Lines
primary: '#06b6d4', // Cyan (Tag/Key)
secondary: '#8b5cf6', // Violet (Value/Data)
accent: '#10b981', // Emerald (Wire Type/Bits)
highlight: '#f59e0b', // Amber (MSB/Varint logic)
dang
生成一个能解释“protobuf是如何将一个结构化数据序列化
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// --- Configuration ---
const WIDTH = 1200;
const HEIGHT = 700;
const GRID_SIZE = 40;
const COLORS = {
bg: '#020617', // Deep Space
grid: '#1e293b', // Grid Lines
attacker: '#ef4444', // Red (Attacker)
target: '#3b82f6', // Blue (Target)
targetComp: '#8b5cf6',// Purple (Compromised)
packet: '#f59e0b', // Amber (Payload)
memory: '#334155', // Slate (Memory Block
生成一个讲解“永恒之蓝”漏洞复现的详细过程
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLOR_BG = '#0f172a';
const COLOR_LINUX = '#22c55e'; // Green-500
const COLOR_AI_1 = '#3b82f6'; // Blue-500
const COLOR_AI_2 = '#a855f7'; // Purple-500
const COLOR_TEXT = '#f8fafc';
// Utility for interpolation
const lerp = (start, end, t) => start * (1 - t) + end * t;
const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
从Linux操作系统进化为AI操作系统
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 5x7 Dot Patterns 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
神经网络识别手写数字过程
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER = { x: VIEW_WIDTH / 2, y: VIEW_HEIGHT / 2 };
const RADIUS = 220;
// Helper: Generate random range
const random = (min, max) => Math.random() * (max - min) + min;
// Agent Types configuration
const AGENT_CONFIGS = [
{ id: 0, role: 'Architect', label: '架构师', color: '#38bdf8', icon: 'A' },
{ id: 1, role: 'Developer', label: '开发者', color: '#818cf8'
帮我生成 AI 智能体，互相协作的动画
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Styles
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
const COMPONENT_BG = "#1e293b";
const COMPONENT_BORDER = "#334155";
const TEXT_MAIN = "#f8fafc";
const TEXT_SUB = "#94a3b8";
// Neon Colors
const COLOR_PC = "#3b82f6";
cpu是怎样执行指令集的？涉及到哪些硬件配合以及执行过程？
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
// 配色方案：科技蓝/青色为主，警告黄，错误红
const THEME = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
primary: '#0ea5e9', // Sky 500
accent: '#10b981', // Emerald 500
warn: '#f59e0b', // Amber 500
danger: '#ef4444', // Red 500
textMain: '#f1f5f9', // Slate 100
textSub: '#94a3b8', // Slate 400
glowBlue: 'rgba(14, 165, 233, 0.6)',
glowGreen: '