SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BG_COLOR = "#0f172a";
// 颜色定义
const COLORS = {
primary: "#38bdf8", // Sky blue
secondary: "#818cf8", // Indigo
accent: "#f472b6", // Pink
moe: "#34d399", // Emerald for Experts
grid: "#1e293b",
text: "#e2e8f0",
highlight: "#fbbf24"
};
export default function TransformerArchitectureView() {
// 动画阶段: 0=Input, 1=Encoder, 2=CrossAttn, 3=Decoder(MoE),
大模型transformers的执行流程图，增加多一个enc
移开即停止播放
```jsx
import React, { useState, useEffect, useMemo, useRef } from 'react';
const ChineseHistoryMap = () => {
const [currentIndex, setCurrentIndex] = useState(0);
const [progress, setProgress] = useState(0);
const [prevIndex, setPrevIndex] = useState(null);
// 动画配置
const DURATION_PER_ERA = 8000; // 延长单朝代展示时间以增强沉浸感
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 700;
// 数据源：增加开国皇帝 (emperor) 字段，微调描述
const dynasties = useMemo(() => [
{
id: 'qin',
name: '秦',
中国历史各个朝代变更，需要表现出各个朝代的名字、时间、以及疆
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// Helper for smooth animation loop
const useAnimationFrame = (callback) => {
const requestRef = useRef();
const previousTimeRef = useRef();
const animate = time => {
if (previousTimeRef.current != undefined) {
const deltaTime = time - previousTimeRef.current;
callback(deltaTime, time);
}
previousTimeRef.current = time;
request
把这首古诗所描绘的景象画出来：“鹅鹅鹅，曲项向天歌。白毛浮绿
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useMemo } from 'react';
// --- 配置常量 ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 500;
const COLORS = {
bg: "#ebeef4",
grid: "#cbd5e1",
textMain: "#334155", // Slate 700
textSub: "#64748b", // Slate 500
primary: "#0ea5e9", // Sky 500 (主句)
secondary: "#8b5cf6", // Violet 500 (从句)
accent: "#f59e0b", // Amber 500 (高亮/逻辑)
success: "#10b981", // Emerald 500 (完成)
white: "#ffffff",
shadow: "rgba(148, 163, 184,
用动画表示英语定语从句的规则
移开即停止播放
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// 常量与类型定义
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const GROUND_Y = 320;
const PIPE_Y = 420;
const PIPE_HEIGHT = 60;
const GATE_X = 650;
const TRAP_X = 350; // 沉井位置
type Phase = 'DRAINAGE' | 'RIVER_RISING' | 'DEFENSE' | 'RECEDIN
赣州福寿沟的工作原理，为何从宋代用到现在。
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
text: '#cbd5e1',
highlight: '#38bdf8',
app: '#f472b6', // Pink
tcp: '#818cf8', // Indigo
ip: '#34d399', // Emerald
eth: '#fbbf24', // Amber
binary: '#00ffcc',
};
const LAYERS = [
{ id: 'app', name: 'Application', label: '应用层', y: 100, color: COLORS.app },
{ id: 'transport', name: 'Transport'
网络分包协议动画
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 粒子类型定义
interface Particle {
id: number;
x: number;
y: number;
speed: number;
radius: number;
opacity: number;
wobbleOffset: number;
type: 'reactor' | 'tube' | 'jar';
pathProgress?: number; // 0-1 for tube travel
}
export const HydrogenLabView = () => {
// 状态管理
const [bubbles, setBubbles] = useState<Particle[]>([]);
const [reactionProg
实验室制取氢气
移开即停止播放
```javascript
'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;
// 粒子组件：背景漂浮的微粒
const Particle = ({ x, y, size, opacity }) => (
<circle cx={x} cy={y} r={size} fill="#fff" opacity={opacity} />
);
export const CovalentBondView = () => {
// 动画状态
// phase: 0-1 (approaching), 1-2 (bonding/stabilizing), 2-3 (holding), 3-4 (resetting)
const [t
共价键的形成
广告
Ads移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BACKGROUND_COLOR = '#e6e6e6';
// Utils
const randomRange = (min, max) => Math.random() * (max - min) + min;
// Types
type Particle = {
id: number;
x: number;
y: number;
type: 'image' | 'text' | 'audio';
color: string;
targetX: number;
targetY: number;
speed: number;
delay: number;
};
type Node = { x: number; y: number; layer: number };
生成一个训练模型所需要的完整的步骤。还有数据处理步骤，数据采
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const DIALOGUE = [
{ id: 1, side: 'left', text: "Hello! Nice to meet you.", cn: "你好！很高兴见到你。" },
{ id: 2, side: 'right', text: "Hi there! I am Alice.", cn: "嗨！我是爱丽丝。" },
{ id: 3, side: 'left', text: "I am Bob. Do you speak English?", cn: "我是鲍勃。你会说英语吗？" },
{ id: 4, side: 'right', text: "Yes, I am learning it now.", cn: "是的，我现在正在学习。" },
{ id: 5, side: 'lef
生成两个小孩子在用英语对话的
移开即停止播放
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a';
// Helper to generate random numbers
const random = (min, max) => Math.random() * (max - min) + min;
// Particle Interface
interface Particle {
id: number;
x: number;
y: number;
vx: number;
vy: number;
life: number;
type: 'water' | 'light' | 'co2' | 'nutrient';
}
export const PlantGrowthView = () => {
const [time, set