SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CYCLE_DURATION = 24000; // 24 seconds for a full 24h cycle
const FPS = 60;
// Utility for color interpolation
const interpolateColor = (color1, color2, factor) => {
const result = color1.slice(1).match(/.{2}/g).map((hex, i) => {
return Math.round(parseInt(hex, 16) + factor * (parseInt(color2.slice(1).match(/.{2}/g)[i], 16) - parseInt(hex, 16)));
});
return `#${
生成一个昼夜循环的动画
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ==========================================
// 配置常量与工具函数
// ==========================================
const VIEW_WIDTH = 1280;
const VIEW_HEIGHT = 720;
const FPS = 60;
// 颜色定义
const COLORS = {
bg: '#0f172a', // 墨蓝深底
wall: '#1e293b',
wallHighlight: '#334155',
ground: '#020617',
operator: '#0f0f0f', // 哑光黑
gearHighlight: '#27272a',
nvgLight: '#10b981', // 夜视仪绿/青
laser: '#ef4444', // 激光红
flashl
场景设定在光线昏暗、充满工业质感的废弃仓库走廊，墙面布满斑驳
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const COLOR_BG = '#0f172a';
const COLOR_LINUX = '#22c55e'; // Green-500
const COLOR_AI_1 = '#3b82f6'; // Blue-500
const COLOR_AI_2 = '#a855f7'; // Purple-500
const COLOR_TEXT = '#f8fafc';
// Utility for interpolation
const lerp = (start, end, t) => start * (1 - t) + end * t;
const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
从Linux操作系统进化为AI操作系统
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 5x7 Dot Patterns for Digits 0-9
const DIGIT_PATTERNS = {
0: [
0,1,1,1,0,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
1,0,0,0,1,
0,1,1,1,0
],
1: [
0,0,1,0,0,
0,1,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,0,1,0,0,
0,1,1,1,0
],
2: [
0,1,1,1,0,
1,0,0,0,1,
0,0,0,0,1,
0,0,0,1,0,
0
神经网络识别手写数字过程
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// Color Palette based on requirements
const BG_BASE = '#326fa4'; // User specified
const BG_DARK = '#1e4b75';
const ACCENT_CYAN = '#67e8f9';
const ACCENT_YELLOW = '#fde047';
const GLASS_WHITE = 'rgba(255, 255, 255, 0.15)';
const TEXT_WHITE = '#ffffff';
// Floating floating symbols (Mixed EN/CN for context)
const SYMBOLS = [
{ text: 'A', type: 'en' }, { text:
帮我创建一个美国孩子学习中文的网站ui，包括登录页、注册页、
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BACKGROUND_COLOR = '#0f172a';
const ACCENT_COLOR = '#38bdf8';
const TEXT_COLOR = '#e2e8f0';
// --- Data & Configuration ---
const ELEMENT_DATA = [
{ z: 1, s: 'H', n: 'Hydrogen', cat: 'Nonmetal', desc: 'The Sun / Fuel', col: 1, row: 1 },
{ z: 2, s: 'He', n: 'Helium', cat: 'Noble Gas', desc: 'Balloons', col: 18, row: 1 },
{ z: 3, s: 'Li', n: 'Lithium', cat: 'Alkali
画一个完整的元素周期表，遍历每种元素的时候，画出元素所对应的
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 颜色定义
const COLORS = {
bg: '#0f172a',
text: '#f8fafc',
a: '#38bdf8', // 蓝色
b: '#fbbf24', // 金色
c: '#f472b6', // 粉色
accent: '#10b981', // 绿色
line: '#475569'
};
const DistributiveLaw = () => {
const [frame, setFrame] = useState(0);
const requestRef = useRef<number>();
const startTimeRef = useRef<number>(Date.now());
// 动画状态控制
// 0: 初始展示
生成一个数学中乘法分配律的动画讲解，包括括号中的加减法
Sponsored
AdsPlayback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 动画配置常量
const CONFIG = {
viewWidth: 800,
viewHeight: 450,
bubbleSize: 60,
gap: 30,
animationSpeed: 800, // 交换动画时长 ms
stepDelay: 1000, // 每步停顿 ms
colors: {
bg: '#0f172a',
primary: '#38bdf8', // 蓝色
locked: '#fbbf24', // 金色
frame: '#60a5fa', // 聚焦框颜色
success: '#4ade80', // 比较正确（绿色）
text: '#ffffff'
}
};
// 气泡数据接口
interface BubbleData {
id: number;
v
第一幕：最大的气泡开始“上浮” 动画开始： 【聚焦框出现】
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 遗传学配色方案
const COLORS = {
bg: '#ffffff',
primary: '#2563EB', // 蓝色
secondary: '#059669', // 绿色
accent: '#7C3AED', // 紫色
text: '#1F2937',
grid: '#E5E7EB',
bases: {
A: '#EF4444', // 腺嘌呤 - 红
T: '#3B82F6', // 胸腺嘧啶 - 蓝
C: '#10B981', // 胞嘧啶 - 绿
G: '#F59E0B', // 鸟嘌呤 - 黄
}
};
// 碱基配对规则
const BASE_PAIRS = [
{ left: 'A', right: 'T' },
生成一份高中生物遗传学相关知识的动画
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 600;
const VIEW_HEIGHT = 1000;
const FPS = 60;
const SCENE_DURATION = 240; // 4 seconds per scene
const TOTAL_SCENES = 6; // Intro, 4 types, Outro
const TOTAL_FRAMES = TOTAL_SCENES * SCENE_DURATION;
// Color Palette
const COLORS = {
bg: '#0f172a',
primary: '#06b6d4', // Cyan
secondary: '#3b82f6', // Blue
accent: '#f59e0b', // Amber
danger: '#ef4444', // Red
success: '#10b981', // Emerald
text:
英克司兰适合谁。最近英克司兰非常火，不单单是因为它的效果好、
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
const MingDynastyTimeline = () => {
// ---------------------------------------------------------------------------
// 1. 数据配置 (Data Configuration)
// ---------------------------------------------------------------------------
const EMPERORS = useMemo(() => [
{ name: "朱元璋", temple: "太祖", era: "洪武", start: 1368, end: 1398, desc: "驱逐胡虏，恢复中华，立纲陈纪，救济斯民" },
{ name: "朱允炆", temple: "惠宗", era: "建文", start: