SVG Animation Examples Gallery
Browse featured svg animation examples
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
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
主体背景设定为半透明、具有科技感的深蓝色人体大脑剖面，重点高
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
```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
制作一个中职串联电路的闯关式模拟仿真学习系统 要求： 1.
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
```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
```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
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:
英克司兰适合谁。最近英克司兰非常火，不单单是因为它的效果好、
Sponsored
AdsPlayback 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:
创建一个明朝皇帝世袭年表的动画，要标注每一位皇帝名字、封号、
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = 400; // 将主图稍微偏左，右侧留给文字
const CENTER_Y = 300;
const RADIUS = 180;
// 五行配置
const ELEMENTS = [
{ id: 'wood', name: '木', label: 'Wood', color: '#10B981', desc: '生发、条达', organ: '肝 (Liver)' },
{ id: 'fire', name: '火', label: 'Fire', color: '#EF4444', desc: '温热、升腾', organ: '心 (Heart)' },
{ id: 'earth', name: '土', label: 'Earth', color: '#F59E0B', desc: '生化、承载',
生成一个讲解中医原理的动画
Playback pauses when you leave
'use client';
import React, { useMemo } from 'react';
import { motion } from 'framer-motion';
import * as Lucide from 'lucide-react';
// 中医五行颜色配置
const COLORS = {
wood: '#4ade80', // 木 - 绿
fire: '#f87171', // 火 - 红
earth: '#fbbf24', // 土 - 黄
metal: '#94a3b8', // 金 - 银灰
water: '#60a5fa', // 水 - 蓝
ink: '#292524', // 墨
paper: '#fcf9f2' // 纸
};
// 五行数据
const ELEMENTS = [
{ name: '木', label: 'Wood', color: COLORS.wood, angle: 0 },
{ name: '火', label: 'Fire', color: COLORS.fir