SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
// ----------------------------------------------------------------------
// 辅助函数与常量
// ----------------------------------------------------------------------
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
text: '#94a3b8',
highlight: '#38bdf8', // Cyan 400
carbon: '#334155', // Slate 700
oxygen: '#ef4444', // Red 500
nitrogen:
酰胺基团水解反应
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// 视图常量
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 800;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 行星配置数据
const PLANETS_DATA = [
{ name: "水星", en: "Mercury", color: "#A5A5A5", size: 6, orbitX: 70, orbitY: 60, speed: 2.5, type: 'rock' },
{ name: "金星", en: "Venus", color: "#E3BB76", size: 10, orbitX: 110, orbitY: 95, speed: 1.8, type: 'rock' },
{ name: "地球", en: "Earth", color:
创建一个太阳系8大行星模型：中心是一个黄色的太阳，地球沿着椭
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Config
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const NUM_SUPPORTS = 20; // 液压支架数量
const SUPPORT_WIDTH = 40;
const SUPPORT_GAP = 10;
const TOTAL_FACE_WIDTH = NUM_SUPPORTS * (SUPPORT_WIDTH + SUPPORT_GAP);
const SHEARER_SPEED = 1.5
创建一个煤矿井下采煤机、刮板运输机、液压支架协同控制工作的动
Playback pauses when you leave
```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
神经网络识别猫狗
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 = 320;
const FRONT_X = 300;
const REAR_X = 750;
// 辅助函数：生成齿轮路径
const createGearPath = (cx: number, cy: number, radius: number, teeth: number, holeRadius: number = 0) => {
const outerRadius = radius;
const innerRadius = radius * 0.85;
const hole = holeRadius > 0 ? ` M ${cx} ${cy - holeRadius} A ${holeRadius} ${holeRadius} 0 1 0 ${cx} ${cy + h
我要自行车齿轮运动的原理
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// --- 常量配置 ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLORS = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
primary: '#06b6d4', // Cyan 500
secondary: '#8b5cf6',// Violet 500
accent: '#f43f5e', // Rose 500
success: '#10b981', // Emerald 500
warning: '#f59e0b', // Amber 500
textMain: '#f8fafc', // Slate 50
textDim: '#94a3b8', // Slat
显卡在计算机系统中负责渲染画面的完整工作流程，包括从CPU接
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLORS = {
bg: '#0f172a',
primary: '#06b6d4', // Cyan
secondary: '#8b5cf6', // Violet
accent: '#f43f5e', // Rose
text: '#e2e8f0',
grid: '#1e293b',
terminal: '#10b981' // Emerald
};
const STAGES = [
{
id: 'cpu',
title: '1. CPU 指令与数据',
desc: 'CPU 发送 Draw Call，准备顶点数据 (Vertices)',
tech: 'Command Buffer / Input Assembler'
},
显卡在计算机系统中负责渲染画面的完整工作流程，包括从CPU接
Playback pauses when you leave
'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',
链表插入节点的动画
Sponsored
AdsPlayback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useMemo } from 'react';
// 视图常量
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2 - 20;
// 几何常量 (勾股数 3-4-5 的倍数)
const A = 120; // 短边
const B = 160; // 长边
const C = 200; // 斜边
const BOX_SIZE = A + B; // 280
// 动画阶段定义
const PHASES = {
INIT: 0,
SHOW_C: 1,
TRANSITION: 2,
SHOW_AB: 3,
FORMULA: 4,
};
export const PythagoreanTheoremView = () => {
const [phase
创建一个证明勾股定理的动画
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Types & Constants ---
type Node = {
id: number;
value: number;
x: number;
y: number;
left?: number;
right?: number;
parent?: number;
depth: number;
};
type Edge = {
from: number;
to: number;
};
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 700;
const NODE_RADIUS = 22;
const ANIMATION_DELAY = 700;
// Colors
const COLORS = {
bg: '#0f172a', // Slate 900
nodeDefault: '#334155', // Sl
模拟一个二叉树遍历的过程，节点被访问的时候有颜色变化。可以选
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// -----------------------------------------------------------------------------
// CONSTANTS & CONFIGURATION
// -----------------------------------------------------------------------------
const PHASES = {
SOIL: { id: 0, text: '虫卵随粪便排出，在土壤中休眠', duration: 3000 },
INGEST: { id: 1, text: '不洗手抓取食物，虫卵被吞下', duration: 2500 },
HATCH: { id: 2, text