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';
// ----------------------------------------------------------------------
// CONFIGURATION & CONSTANTS
// ----------------------------------------------------------------------
const WIDTH = 1080;
const HEIGHT = 1920;
const SCENE_DURATION = 6000; // ms per scene
const TOTAL_SCENES = 6;
const FADE_DURATION = 800; // ms
// Colors
const COLORS = {
bgStart: '#07121A',
bgEnd: '#050A10',
cyan: '#0
生成横屏 SVG 动画，主题《一目均衡表：结构识别而非预测》
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";
// -----------------------------------------------------------------------------
// Helpers & Math
// -----------------------------------------------------------------------------
const randomRange = (min, max) => Math.random() * (max - min) + min;
// Cubic Bezier point calculation
const getBezierPoint = (t, p0, p1, p2, p3) => {
c
1. 画面背景采用极具科技感的深邃靛蓝色调，SoC内部组件以
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
export const LiBaiJourneyMap = () => {
const [geoData, setGeoData] = useState(null);
const [loading, setLoading] = useState(true);
const [currentIndex, setCurrentIndex] = useState(0);
const [isPlaying, setIsPlaying] = useState(false);
const [progress, setProgress] = useState(0); //
做一个李白一生的轨迹地图动画，重要节点需要进行文字标注
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// Constants & Data
// -----------------------------------------------------------------------------
const TAIPING_PATH = [
{ name: "金田村", year: 1851, type: "uprisin
绘制一个太平天国运动轨迹动画，把最开始一幕金田村补上，其他不
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Utilities
// -----------------------------------------------------------------------------
const WIDTH = 1000;
const HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
const PRIMARY_COLOR = '#06b6d4'; // Cyan-500
const SECONDARY_COLOR = '#8b5cf6'; // Violet-500
const ACCENT_COLOR = '#f59e0b'; // Amber-500
const TEXT_COLOR = '#e2e8f0'
周长的原理
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 PLANETS = [
{ id: 'mercury', name: '水星', nameEn: 'Mercury', color: '#A5A5A5', size: 6, distance: 70, speed: 2.5, orbitColor: '#ffffff30' },
{ id: 'venus', name: '金星', nameEn: 'Venus', color: '#E3BB76', size: 10, distance: 100, speed: 1.8, orbitColo
太阳系行星运动
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const WIDTH = 1200;
const HEIGHT = 600;
const BG_COLOR = "#0f172a";
// 颜色定义
const COLORS = {
brain: "rgba(56, 189, 248, 0.3)",
brainHighlight: "rgba(56, 189, 248, 0.8)",
dopamineNormal: "#38bdf8", // 淡蓝
dopamineHigh: "#fbbf24", // 金色
drug: "#a855f7", // 紫色
drugToxic: "#22c55e", // 毒性绿
receptor: "#94a3b8",
receptorActive: "#cbd5e1",
damaged: "#475569",
};
// 粒子类定义
class Particle {
construc
主体背景设定为半透明、具有科技感的深蓝色人体大脑剖面，重点高
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 COIL_CENTER_X = VIEW_WIDTH / 2;
const COIL_CENTER_Y = VIEW_HEIGHT / 2;
const COIL_RADIUS = 70;
const COIL_LOOPS = 12;
const COIL_WIDTH = 300;
export default function ElectromagneticInduction() {
// 动画状态
const [animState, setAnimState] = useState({
magnetX: -200, // 磁铁位置
velocity: 0, // 磁铁速度
current: 0, // 感应电流强度
flux: 0,
电磁感应实验
Playback pauses when you leave
'use client';
import React, { useMemo } from 'react';
import { motion } from 'framer-motion';
import { Cpu, Zap, Aperture, Wifi, ScanFace, Globe } from 'lucide-react';
export default function IPhone20Reveal() {
// 生成背景粒子，只计算一次
const particles = useMemo(() => {
return Array.from({ length: 20 }).map((_, i) => ({
x: Math.random() * 100,
y: Math.random() * 100,
size: Math.random() * 3 + 1,
duration: Math.random() * 3 + 2,
delay: Math.random() * 2,
}));
},
设计一个iPhone20新款手机的宣传动画
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// --- Constants & Config ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const UNIT = 40; // Pixel size of one grid unit
const A_VAL = 5; // Units for a
const B_VAL = 3; // Units for b
const COLORS = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
gridLine: '#334155', // Slate 700
a: '#06b6d4', // Cyan 500 (a component)
b: '#d946ef', // Fuchsia 500 (b componen
做一个讲解完全平方公式的几何证明动画
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// --- 常量定义 ---
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const GRID_SIZE = 20;
const BG_COLOR = '#0f172a';
const COMPONENT_SIZE = 80;
// 模拟参数
const BATTERY_VOLTAGE = 3.0; // 3V
const BULB_RESISTANCE = 10; // 10 Ohm
const WIRE_RESISTANCE = 0.1;
// --- 音效处理 (AudioContext) ---
// 使用 useRef 保持 AudioContext 实例，避免重复创建
const useSound = () => {
const audioCtxRef = useRef(null);
const playTon