SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 动画组件：动滑轮组机械原理展示
export const PulleySystemAnimation = () => {
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a';
const ACCENT_COLOR = '#06b6d4'; // Cyan
const SECONDARY_COLOR = '#8b5cf6'; // Purple
const ROPE_COLOR = '#e2e8f0';
const TEXT_COLOR = '#94a3b8';
// 动画状态
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
const startTimeRef = use
动滑轮组
Playback pauses when you leave
'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
实验室制取氢气
Playback pauses when you leave
```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
共价键的形成
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ----------------------------------------------------------------------
// 物理引擎与常量定义
// ----------------------------------------------------------------------
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 500;
const PARTICLE_COUNT = 100; // 10x10 Grid
const PARTICLE_RADIUS = 4;
const GRID_SPACING = 25;
// 阶段定义
const PHASE_ORDER = 'ORDER'; // 有序 (晶体/低熵)
const PHASE_TRANSITION = 'TRANSITION';
给我一个熵增的过程动画
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
```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';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const GROUND_Y = 550;
const ROD_WIDTH = 300;
const ROD_HEIGHT = 40;
// Helper: Random range
const random = (min: number, max: number) => Math.random() * (max - min) + min;
// Type definitions
interface Particle {
id: number;
x: number;
y: number;
vx: number;
vy: number;
rotation: number;
vr: number; // angular velocity
color: string;
scale: num
摩擦后从地面吸起小子条
Sponsored
AdsPlayback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
// 粒子/纸屑类型定义
interface Scrap {
id: number;
x: number;
y: number;
rotation: number;
color: string;
vx: number;
vy: number;
isStuck: boolean;
stuckOffsetX: number;
stuckOffsetY: number;
mass: number;
}
interface Electron {
id: number;
x: number;
y: number;
targetX: number;
targetY: number;
progress: number;
speed: number;
}
export const Elect
静电摩擦吸附演示 准备材料 塑料直尺 / 梳子、羊毛衫 /
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const MAX_WAVE_POINTS = 600;
const SPEED = 0.015;
export const FourierSeriesView = () => {
// Animation state
const [time, setTime] = useState(0);
const [nTerms, setNTerms] = useState(1);
const [wavePath, setWavePath] = useState<{x: number, y: number}[]>([]);
// Refs for animation loop logic to avoid closure staleness
const timeRef = useRef(0);
the principle of Fourier serie
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Config
// -----------------------------------------------------------------------------
const WIDTH = 800;
const HEIGHT = 500;
const ORIGIN_X = WIDTH / 2;
const ORIGIN_Y = HEIGHT / 2;
const SCALE_X = 60; // pixels per unit x
const SCALE_Y = 120; // pixels per unit y (amplitude)
const MAX_TERMS = 9; // Number of non-z
Visualize the Taylor series with SVG animation
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
const SCALE = 40; // 40 pixels = 1 unit
// Function Definitions
const FUNCTION_DATA = [
{
id: 'linear',
title: '一次函数 (Linear Function)',
formula: 'y = x',
color: '#3B82F6',
range: [-10, 10],
fn: (x: number) => x,
},
{
id: 'quadratic',
title: '二次函数 (Quadratic F