SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo } from 'react';
// 视图配置：使用标准 HD 比例 1280x720 以保证 16:9 的完美适配
const VIEW_WIDTH = 1280;
const VIEW_HEIGHT = 720;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 配色方案：科技蓝、警告橙、数据白
const THEME = {
bg: '#0f172a', // Slate 900
primary: '#00f0ff', // Cyber Cyan
secondary: '#3b82f6', // Tech Blue
accent: '#f59e0b', // Amber Warning
highlight: '#ffffff', // Pure White
grid: '#1e293b', // Grid Lin
先出现中间一个16:9的方框，方框由是高科技感的光线环绕，先
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
生化分离专业的沉淀技术，你帮我做一个沉降的动画，通过加入试剂
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 宇宙常数与配置
const PLANET_CONFIG = [
{ id: 'mercury', name: '水星', nameEn: 'MERCURY', color: '#A5A5A5', size: 4, radius: 60, speed: 4.1, orbitColor: 'rgba(165, 165, 165, 0.3)' },
{ id: 'venus', name: '金星', nameEn: 'VENUS', color: '#E3BB76', size: 7, radius: 90, speed: 2.6, orbitColor: 'rgba(227,
太阳系动画
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
const PRIMARY_COLOR = "#38bdf8"; // Sky blue for Input
const SECONDARY_COLOR = "#f472b6"; // Pink for Output
const ACCENT_COLOR = "#4ade80"; // Green for Retention
const TEXT_COLOR = "#e2e8f0";
// Particle Types
type Particle = {
id: number;
x: number;
y: number;
vx: number;
vy: number;
life: number;
type: 'input' | 'out
知識を習得するために、自ら出力をする必要があります。そのよう
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 = VIEW_HEIGHT / 2;
const CIRCLE_X = 200;
const RADIUS = 120;
const WAVE_START_X = 380;
const WAVE_WIDTH = 550;
export const SinusoidalMotion = () => {
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
const pointsRef = useRef<{ x: number; y: number }[]>([]);
const animate = (t: number) => {
setTime((prev) => pr
我要一个sin角运动的动画
Playback pauses when you leave
'use client';
import React, { useEffect, useState, useRef } from 'react';
const ElectromagneticWave = () => {
const [time, setTime] = useState(0);
const requestRef = useRef<number>();
const animate = (t: number) => {
setTime(t / 1000);
requestRef.current = requestAnimationFrame(animate);
};
useEffect(() => {
requestRef.current = requestAnimationFrame(animate);
return () => {
if (requestRef.current) cancelAnimationFrame(requestRef.current);
};
}, []);
电磁波是如何产生的
Sponsored
AdsPlayback pauses when you leave
'use client';
import React, { useEffect, useRef, useState, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
const ACCENT_COLOR = '#38bdf8'; // Cyan
const HARMONIC_COLORS = ['#fbbf24', '#f472b6', '#4ade80', '#818cf8'];
const FourierDecomposition = () => {
const requestRef = useRef<number>();
const [time, setTime] = useState(0);
// 动画循环
const animate = (t: number) => {
setTime(t / 1000);
requestRef.current = requestAn
把复杂信号分解成多个不同频率的正弦信号
Playback pauses when you leave
import React, { useState, useEffect, useRef } from 'react';
const OpAmpPrinciple = () => {
const [time, setTime] = useState(0);
const requestRef = useRef();
// 模拟参数
const amplitude = 40;
const frequency = 0.05;
const gain = 2.5;
const rin = 100;
const rf = 250;
useEffect(() => {
const animate = (t) => {
setTime(t * 0.002);
requestRef.current = requestAnimationFrame(animate);
};
requestRef.current = requestAnimationFrame(animate);
return () => canc
生成一个运算放大器工作原理动画
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export default function TransistorWorkingPrinciple() {
const [phase, setPhase] = useState(0); // 0: Off, 1: Gate Charging, 2: Channel Formed, 3: Conducting
const [electrons, setElectrons] = useState([]);
const requestRef = useRef();
// 模拟生命周期：循环展示工作原理
useEffect(() => {
const timer = setInterval(() => {
setPhase((prev) => (prev + 1) % 4);
生成一个晶体管工作原理动画
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
/**
* CNC Lathe Animation Component
* High-fidelity visualization of CNC turning process
*/
export default function CNCLatheAnimation() {
// Constants
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_Y = 300; // Spindle Axis
const CHUCK_X = 150;
const PART_LENGTH = 400;
const RAW_RADIUS = 80;
// Animation State
const [time, setTime] = useState(0);
const [spin
数控车床加工原理
Playback 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)