SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export default function CaoCaoWeighingElephant() {
// Animation Phases:
// 0: Idle/Intro
// 1: Elephant Boards (Boat Sinks)
// 2: Mark Water Level (Data Capture)
// 3: Elephant Exits (Boat Rises)
// 4: Load Rocks (Boat Sinks)
// 5: Match Level (Calculation)
// 6: Result
const [phase, setPhase] = useState(0);
const [boatY, setBoatY] = useState(0);
c
曹操称象的动画
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 ORIGIN_X = 500; // 原点屏幕X
const ORIGIN_Y = 100; // 原点屏幕Y (因为开口向下，顶点在上方，预留上方空间)
const SCALE_X = 60; // X轴缩放比例
const SCALE_Y = 12; // Y轴缩放比例 (Y轴数值变化大，压缩显示)
export default function ParabolaGeometryAnimation() {
const [m, setM] = useState(-5);
const requestRef = useRef<number>();
const startTimeRef = useRef<number>();
// 动画循
在平面直角坐标系中，抛物线y=-x^2+2x+3的对称轴为直
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_BUBBLES = 60;
const MAX_STEAM = 40;
interface Particle {
id: number;
x: number;
y: number;
size: number;
speed: number;
wobbleOffset: number;
opacity: number;
}
export const BoilingWaterSimulation = () => {
// 仿真状态
const [temperature, setTemperature] = useState(20);
const [time, setTime] = useState(0);
const [phase, se
标准大气压下水的沸腾过程
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_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
const FOCAL_LENGTH = 120; // 焦距 f
export default function ConvexLensImaging() {
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
// 动画循环
const animate = (t: number) => {
setTime(t / 1000);
requestRef.current = requestAnimationFrame(animate);
};
use
凸透鏡成像原理
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const TOTAL_HEADS = 8;
const TOTAL_LEGS = 22;
export default function ChickenRabbitSolver() {
// Animation States
const [step, setStep] = useState(0);
const [animals, setAnimals] = useState(Array(TOTAL_HEADS).fill({ legs: 0, isRabbit: false }));
const [extraLegs, setExtraLegs] = useState(0);
const [flyingLegs, setFlyingLegs] = useState<{id: number, targetIdx:
我是小学奥数教师，我要做一个鸡兔同笼问题解答过程，帮我输出。
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 颜色定义 - 科技感配色
const COLORS = {
bg: '#0f172a', // 背景色
primary: '#38bdf8', // 主梯形颜色 (天蓝)
secondary: '#a78bfa', // 复制梯形颜色 (紫)
accent: '#facc15', // 强调色 (黄)
text: '#e2e8f0', // 文本颜色
grid: '#1e293b', // 网格线
dim: '#475569', // 暗淡色
};
export default function TrapezoidAreaProof() {
const [step, setStep] = useState(0);
我是小学数学教师，我要做一个梯形面积的证明过程，帮我输出。简
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ==========================================
// 常量与配置
// ==========================================
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#7b92c6';
const DISK_COLORS = ['#FF6B6B', '#FFD93D', '#6BCB77', '#4D96FF', '#9D4EDD'];
const DISK_COUNT = 4; // 碟子数量
const ANIMATION_SPEED = 1.5; // 速度系数
// 贝塞尔缓动函数
const easeInOutCubic = (t: number) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2
作一個和河內塔遞回解析的動畫
Playback pauses when you leave
```tsx
'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 RADIUS = 200;
const BG_COLOR = "#0f172a";
// 辅助函数：计算正n边形的顶点坐标
const getPolygonPoints = (n: number, r: number, rotationOffset = -Math.PI / 2) => {
const points = [];
for (let i = 0; i < n; i++) {
const theta = (i / n) * 2 * Math.PI + rotationOffset;
points.push({
x:
割圆术如何计算圆周长
Sponsored
AdsPlayback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BEAKER_X = VIEW_WIDTH / 2;
const BEAKER_Y = VIEW_HEIGHT / 2 + 50;
const BEAKER_WIDTH = 300;
const BEAKER_HEIGHT = 350;
const WATER_LEVEL = 250; // Height of water from bottom of beaker
// Particle Types
type ParticleType = 'bubble' | 'spark' | 'smoke' | 'trail';
interface Particle {
id: number;
x: number;
y: number;
vx: number;
vy: number;
lif
请生成一个 金属钠在水中发生化学反应的动画
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
export default function OpticalImagingAnimation() {
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// Optical Constants
const FOCAL_LENGTH = 120; // Focal length (f)
const OBJ_HEIGHT = 80; // Height of the object
// Animation State
const [time, setTime] = useState(0);
// Animation Loop
useEffect(() => {
le
光影成像的科普动画
Playback pauses when you leave
```tsx
'use client';
import React, { useState, useEffect, useMemo } from 'react';
// --- Constants & Config ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const UNIT = 40; // Pixel size of one grid unit
const A_UNITS = 3;
const B_UNITS = 4;
const C_UNITS = 5;
const COLORS = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
gridLine: '#334155', // Slate 700
a: '#06b6d4', // Cyan 500 (Neon)
b: '#8b5cf6', // Violet 500 (Neon)
c: '#10b981',