SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const WIDTH = 1000;
const HEIGHT = 600;
const PADDING = { top: 60, right: 100, bottom: 100, left: 60 };
const CHART_WIDTH = WIDTH - PADDING.left - PADDING.right;
const CHART_HEIGHT = HEIGHT - PADDING.top - PADDING.bottom;
const PRICE_HEIGHT = CHART_HEIGHT * 0.7;
const VOL_HEIGHT = CHART_HEIGHT * 0.25;
const VOL_TOP = PRICE_HEIGHT + 30;
// Helper: Generate realistic market data with a specific narrative
const ge
1. 位置要对：要么是绝对底部（长期下跌后），要么是相对底部
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
export default function OccupationalHealthAnimation() {
// Animation phases:
// 0: Idle/Enter
// 1: Scanning (X-Ray)
// 2: Scan Success/Analysis
// 3: Equipping (Mask + Helmet)
// 4: Mining (Descent)
const [phase, setPhase] = useState(0);
const [scannerY, setScannerY] = useState(100);
const [mineDepth, setMineDepth] = useState(0);
// Ref for animation loop
const frameRef = useRef(0);
创建一个动画小人拍胸部X光或CT检查，之后下矿带口罩
Playback pauses when you leave
import React, { useEffect, useRef, useState, useMemo } from 'react';
const WavePropagationDemo = () => {
const canvasRef = useRef(null);
const containerRef = useRef(null);
const [fps, setFps] = useState(0);
const [modeIndex, setModeIndex] = useState(0);
// Simulation Constants
const SIM_WIDTH = 200; // Lower resolution for performance, scaled up via CSS
const SIM_HEIGHT = 120;
// Scenarios configuration
const scenarios = useMemo(() => [
{
name: "单源传播 (Single S
波的传播演示动画，可以设置很多参数，有干涉、衍射等
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
export default function ScbaTrainingAnimation() {
const [step, setStep] = useState(0); // 0: Intro, 1: Check, 2: Backpack, 3: Mask, 4: Breathe
const [subProgress, setSubProgress] = useState(0);
const [breathingVal, setBreathingVal] = useState(0);
// Animation Loop for continuous effects
useEffect(() => {
let animationFrameId;
const startTime = Date.now();
穿戴空气呼吸器的动画
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 562; // 16:9 Aspect Ratio
const COLOR_BG = '#0f172a';
const COLOR_PINK = '#ff00cc'; // Danganronpa Pink
const COLOR_CYAN = '#00ffff';
const COLOR_YELLOW = '#ffcc00';
const COLOR_WHITE = '#ffffff';
export default function DanganronpaAnimation() {
const [phase, setPhase] = useState(0); // 0: Search, 1: Lock, 2: Fire, 3: Break
const [textIndex, setTextIndex] = useSt
弹丸论破
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Configuration & Constants ---
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COURT_WIDTH = 800;
const COURT_HEIGHT = 400;
const PAD_X = (VIEW_WIDTH - COURT_WIDTH) / 2;
const PAD_Y = (VIEW_HEIGHT - COURT_HEIGHT) / 2;
const NET_X = VIEW_WIDTH / 2;
const KITCHEN_WIDTH = 64; // Non-Volley Zone width (scaled)
const KITCHEN_LEFT = NET_X - KITCHEN_WIDTH;
const KITCHEN_RIGHT = NET_X + KITCHEN_WIDTH;
//
画一个有球场动画的匹克球接发球，记分
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;
// Helper to convert degrees to radians
const rad = (deg) => (deg * Math.PI) / 180;
// Helper for circular motion
const getCirclePt = (cx, cy, r, angleRad) => ({
x: cx + r * Math.cos(angleRad),
y: cy + r * Math.sin(angleRad),
});
export default function FOCAnimation() {
const [angle, setAngle] = useState(0);
const [his
根据工业级开源FOC---VESC项目制作 一个关于FOC电
Playback pauses when you leave
import React, { useState, useEffect, useMemo, useRef } from 'react';
const AI_Music_Gen_View = () => {
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 562; // 16:9
const DURATION = 12000; // 12 seconds loop
const [time, setTime] = useState(0);
// Animation Loop
useEffect(() => {
let startTimestamp;
let reqId;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const elapsed = timestamp - startTimestamp;
setTime(elapsed % DUR
1. 特写：AI音乐合成系统，“青春励志歌词”自动填充，流行
Sponsored
AdsPlayback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// Utility for 3D projection
const project = (x, y, z, width, height, time) => {
const scale = 200 / (200 + z);
const x2d = x * scale + width / 2;
const y2d = y * scale + height / 2;
return { x: x2d, y: y2d, scale };
};
// Component: Script / Code Rain
const ScriptPanel = ({ active }) => {
const lines = useMemo(() => Array.from({ length: 12 }, (_, i) => ({
id: i
2. 分屏1：左上生成剧本摘要，右上自动生成分镜草图； 3.
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
'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