SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
```tsx
'use client';
import React, { useState, useEffect, useMemo } from 'react';
export default function OpticalImagingSciFi() {
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 物理常量
const FOCAL_LENGTH = 160; // 焦距 f
const OBJ_BASE_HEIGHT = 90; // 物体基础高度
// 动画状态
const [time, setTime] = useState(0);
// 动画循环
useEffect(() => {
let animationFrameId;
const animate = () => {
setTime(t =
光影成像的科普动画
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLS = 16;
const ROWS = 10;
const BASE_SPACING = 40;
const START_X = (VIEW_WIDTH - (COLS - 1) * BASE_SPACING) / 2;
const START_Y = (VIEW_HEIGHT - (ROWS - 1) * BASE_SPACING) / 2;
// Animation Phases
const PHASES = [
{ id: 'INIT', text: '初始状态：晶格排列均匀', duration: 2000 },
{ id: 'HEATING', text: '整体加热：热膨胀导致分子间距增大', duration: 3000 },
{ id: 'SURFACE_COOLING'
从分子层面解释一块钢材，由于温度梯度的原因产生残余应力。
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// ----------------------------------------------------------------------
// Types & Constants
// ----------------------------------------------------------------------
type AnimalType = 'unknown' | 'chicken' | 'rabbit';
interface AnimalState {
id: number;
type: AnimalType;
legs: number;
x: number;
y: number;
isTransforming: boolean;
}
interface S
國小六年級解決雞兔同籠問題的數學動畫，可愛版本，在更詳盡的舉
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef } from 'react';
const PhysicsCentripetalDemo = () => {
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
// 物理常量与配置
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2 + 50;
const R = 250; // 圆盘半径 (像素)
const BLOCK_R = 180; // 木块距离圆心距离 (像素)
const TILT = 0.35; // 3D 视角倾斜系数
const OMEGA = 1.5; // 角速度 (rad/s)
// 模拟计算值
co
创建一个演示向心力的三维动画，一个圆盘上有一个木块，这个木块
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1000;
const HEIGHT = 600;
const DT = 0.016; // 60fps physics step
// Vector Math Helpers
const vecAdd = (v1, v2) => ({ x: v1.x + v2.x, y: v1.y + v2.y });
const vecScale = (v, s) => ({ x: v.x * s, y: v.y * s });
export default function NewtonLawsAnimation() {
const [sceneIndex, setSceneIndex] = useState(0);
const [elapsedSceneTime, setElapsedSceneTime] = useState(0);
// Physics State
//
演示牛顿三大定律
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ==========================================
// 配置常量
// ==========================================
const WIDTH = 900;
const HEIGHT = 500;
const TANK_WIDTH = 360;
const TANK_HEIGHT = 340;
const CENTER_X = WIDTH / 2;
const TANK_Y = (HEIGHT - TANK_HEIGHT) / 2 + 20;
const PARTICLE_COUNT = 250; // 增加粒子数量以增强视觉密度
// 颜色定义 - 赛博/生化科技风格
const THEME = {
bg: '#0f172a', // 深蓝底色 (用户指定)
primary: '#06b
生化分离专业的沉淀技术，你帮我做一个沉降的动画，通过加入试剂
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_WIDTH = 300;
const BEAKER_HEIGHT = 400;
const BEAKER_X = (VIEW_WIDTH - BEAKER_WIDTH) / 2;
const BEAKER_Y = 150;
const BLOCK_SIZE = 120;
const WATER_BASE_HEIGHT = 200; // Initial water height from bottom of beaker
// Helper for smooth easing
const easeInOutCubic = (t: number): number => {
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3)
讲解一下浮力定律
Playback pauses when you leave
```tsx
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const COLOR_BG = '#0f172a';
const COLOR_VOLTAGE = '#a855f7'; // Purple
const COLOR_RESISTANCE = '#f97316'; // Orange
const COLOR_CURRENT = '#06b6d4'; // Cyan
const COLOR_GRID = '#1e293b';
// Helper to generate particles
interface Particle {
id: number;
offset: number; // 0 to 1 position along path
}
export const OhmsLawAnimation = () => {
// Physics
ohm law 運動動畫
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// ----------------------------------------------------------------------
// 1. 配置与数据生成 (Configuration & Data)
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1400;
const VIEW_HEIGHT = 800;
const CELL_SIZE = 44; // 稍微增大一点
const GAP = 6;
// 计算表格总宽度: 18列 * (44+6) - 6 = 894
// 居中计算: (1400 - 894) / 2 = 253
const START_X = 253;
const START_Y = 140;
// 元素分类
画一个完整的元素周期表
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 900;
const VIEW_HEIGHT = 600;
// Utility for smooth easing
const easeInOutCubic = (t: number): number => {
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
};
export const ArchimedesPrincipleView = () => {
// Animation State
const [time, setTime] = useState(0);
const [phase, setPhase] = useState<'idle' | 'lowering' | 'submerged' | 'analyzing'>('idle');
// Physic
阿基米德定律
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
// 几何参数定义
const GEOMETRY = {
sourceX: 150,
barrierX: 500,
screenX: 850,
holeY: 300,
objectHeight: 160,
// 简单的相似三角形原理计算投影高度 (这里距离相等，所以是 1:1)
projectionHeight: 160,
};
export default function PinholeCameraAnimation() {
const [animationState, setAnimationState] = useState(0);
// 动画阶段控制
useEffect(() => {
const sequenc