SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// Constants & Data
// -----------------------------------------------------------------------------
const LONG_MARCH_PATH = [
{
name: "瑞金",
year: "1934.10
绘制一个红军长征运动轨迹动画
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Monitor, Cpu, Box, Layers, Activity, Eye } from 'lucide-react';
// ==========================================
// Constants & Configuration
// ==========================================
const WIDTH = 1200;
const HEIGHT = 700;
const BACKGROUND_COLOR = "#0f172a";
const PRIMARY_COLOR = "#0ea5e9"; // Sky blue
const SECONDARY_COLOR = "#6366f1"; // Indigo
const ACCENT_COLOR = "#10b981"; // Emerald
const WARNING_
请生成三维模型LOD制作原理
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const COLOR_BG = '#0f172a';
const COLOR_PRIMARY = '#06b6d4'; // Cyan
const COLOR_SECONDARY = '#8b5cf6'; // Violet
const COLOR_SUCCESS = '#10b981'; // Emerald
const COLOR_TEXT = '#e2e8f0'; // Slate 200
const COLOR_CONSOLE = '#1e293b'; // Slate 800
const COMMAND = "curl -X POST https://api.nexus-core.io/v1/uplink --data-binary @payload.bin";
export default function RadarConsoleAnimation(
A dot shining with radar radia
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
// --- Constants & Config ---
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const NODE_RADIUS = 24;
const LEVEL_HEIGHT = 90;
const ANIM_SPEED = 1.2; // Speed multiplier (higher is slower)
// Colors
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
text: '#f8fafc',
textSub: '#94a3b8',
redNode: '#ef4444',
redNodeGlow: '#f87171',
blackNode: '#0f172a',
bl
帮我实现一下 红黑树的生成流程
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const BG_COLOR = '#0f172a';
const READER_COLOR = '#38bdf8'; // Sky blue
const GAMER_COLOR = '#e879f9'; // Fuchsia
const STROKE_WIDTH = 6;
// --- Utility Hooks ---
const useAnimationFrame = (callback) => {
const requestRef = useRef();
const previousTimeRef = useRef();
useEffect(() => {
const animate = (time) => {
if (previousTimeRef.current !== undefined) {
con
2个火柴人，一个在看书，一个在打游戏
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Sparkles, CheckCircle, Calculator } from 'lucide-react';
// --- Configuration & Constants ---
const WIDTH = 1200;
const HEIGHT = 700;
const MOUNTAIN_Y_BASE = 550;
// Colors
const C = {
bgTop: '#e0f2fe', // Sky 100
bgBottom: '#fff7ed', // Orange 50 (Warm Beige)
mountainDefault: '#94a3b8', // Slate 400
mountainGold: '#fbbf24', // Amber 400
mountainBrown: '#8
创建一个扁平化矢量风格的数学解题动画，背景使用柔和的米色或淡
移开即停止播放
import React, { useState, useEffect, useMemo, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
// --- Constants & Styles ---
const WIDTH = 1200;
const HEIGHT = 700;
const BG_COLOR = "#0f172a"; // Deep slate background
const TEXT_COLOR = "#f8fafc"; // Slate-50
const COLOR_BIG = "#38bdf8"; // Sky blue
const COLOR_SMALL = "#fb923c"; // Orange
const COLOR_DIFF = "#ef4444"; // Red
const COLOR_AUX = "#64748b"; // Slate-500
const STROKE_WIDTH = 6;
const FONT_FAMILY = '"R
创建一个宽高比为16:9的高清SVG动画，背景色设定为护眼的
广告
Ads移开即停止播放
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Play, RotateCcw } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// 颜色定义
const COLORS = {
bg: '#0f172a', // 动画背景色
text: '#f8fafc',
large: '#3b82f6', // 深蓝/亮蓝 (大数)
small: '#f97316', // 橙红 (小数)
aux: '#94a3b8', // 灰色辅助线
diff: '#ef4444', // 红色 (差)
highlight: '#fbbf24', // 高亮
};
// 工具函数：生成花括号路径
const makeBrace = (x1, y1, x2, y2, align = 'right', depth = 20) => {
const q = 0.
创建一个宽高比为16:9的高清SVG动画，背景色设定为护眼的
移开即停止播放
```javascript
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// Component: HexiCorridorViz
// -----------------------------------------------------------------------------
export const HexiCorridorViz = () => {
// 1. Constants & Configuration
const WIDTH =
基于中国地图，生成河西走廊足迹动画、标题为“汉匈第一次河西之
移开即停止播放
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Terminal, Brain, FileCode, Cpu, Layers, Database, Sparkles, MessageSquare } from 'lucide-react';
// -----------------------------------------------------------------------------
// Constants & Config
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const BG_COLOR = '#0f172a'; // Slate 900
const CLAUDE_COLOR = '#D97757'; // Signature O
帮我实现一下 llm 跟 claude code的交互流转动
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
export const CompanyHistoryViz = () => {
// ---------------------------------------------------------------------------
// Constants & Config
// ---------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const I