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 = 1400;
const VIEW_HEIGHT = 900;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
const PLANETS = [
{ id: 'mercury', name: '水星 (Mercury)', color: ['#e2e8f0', '#94a3b8'], distance: 110, size: 8, speed: 4.1, desc: '太阳系中最小的行星，也是最接近太阳的行星。表面布满撞击坑。' },
{ id: 'venus', name: '金星 (Venus)', color: ['#fde047', '#d97706'], distance: 160, size: 14, speed: 3.0, desc: '太阳系中最热的行星，拥有厚重的大气层，温室效应极强。' },
太阳系行星运行动画。要求：高清画质、颜色分明、效果明显。
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// ==========================================
// 常量与配置
// ==========================================
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ORIGIN_X = VIEW_WIDTH / 2;
const ORIGIN_Y = VIEW_HEIGHT / 2 + 60; // 坐标原点
const SCALE = 30; // 缩放比例
const GRID_SIZE = 1; // 网格单位
// 颜色配置 - 科技感配色
const THEME = {
bg: '#0f172a',
gridMain: '#1e293b',
gridSub: '#172033',
axis: '#64748b',
primary: '#0ea5
创建一个可交互动画，上面显示一组按钮：a、b、c，分别显示为
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图常量
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ORIGIN_X = VIEW_WIDTH / 2;
const ORIGIN_Y = VIEW_HEIGHT / 2 + 60; // 坐标原点下移，留出上方空间
const SCALE = 30; // 缩放比例
// 科技感配色方案
const COLORS = {
bg: '#0f172a', // 深蓝灰背景
gridMain: '#334155', // 主网格
gridSub: '#1e293b', // 次网格
axis: '#94a3b8', // 坐标轴
primary: '#38bdf8', // 主色调（天蓝）- 曲线
primaryGlow: '#0ea5e9',// 发光色
secondary: '#f472b6', /
修改这个动画，现在参数面板拖动的时候响应位置和滑动条的圆点位
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图常量
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const ORIGIN_X = VIEW_WIDTH / 2;
const ORIGIN_Y = VIEW_HEIGHT / 2 + 60; // 坐标原点
const SCALE = 30; // 缩放比例：1单位 = 30像素
// 颜色定义 - 科技感配色
const COLORS = {
bg: '#0f172a', // 深蓝灰背景
gridMain: '#1e293b', // 主网格
gridSub: '#172033', // 次网格
axis: '#64748b', // 坐标轴
primary: '#0ea5e9', // 主色调（亮蓝）- 曲线
secondary: '#ec4899', // 次色调（粉红）- 顶点/标记
accent
修改这个动画，让左上角的面板吧里面的文字都能容纳进去，现在三
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
// 配色方案：科技蓝/青色为主，警告黄，错误红
const THEME = {
bg: '#0f172a', // Slate 900
grid: '#1e293b', // Slate 800
primary: '#0ea5e9', // Sky 500
accent: '#10b981', // Emerald 500
warn: '#f59e0b', // Amber 500
danger: '#ef4444', // Red 500
textMain: '#f1f5f9', // Slate 100
textSub: '#94a3b8', // Slate 400
glowBlue: 'rgba(14, 165, 233, 0.6)',
glowGreen: '
展示DHCP协议的租约续约工作过程
Playback pauses when you leave
import React, { useEffect, useRef } from 'react';
const RedBlueWarfare = () => {
const canvasRef = useRef(null);
const containerRef = useRef(null);
// 使用 Ref 存储动画状态，避免 React 渲染循环
const gameState = useRef({
frame: 0,
width: 0,
height: 0,
redNodes: [],
blueNodes: [],
centerNode: { x: 0, y: 0, health: 100, maxHealth: 100, shield: 100 },
packets: [], // 传输的数据包/攻击
particles: [], // 爆炸碎片
logs: [], // 滚动日志
scanLineY: 0
});
useEffect(() => {
c
生成一个红蓝对抗网络攻防的图片
Sponsored
AdsPlayback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BG_COLOR = "#0f172a";
const PRIMARY_COLOR = "#38bdf8"; // sky-400
const ACCENT_COLOR = "#f472b6"; // pink-400
const SUCCESS_COLOR = "#4ade80"; // green-400
const GRID_COLOR = "#1e293b";
// 模拟神经网络结构
const LAYERS = [4, 6, 6, 3]; // Input, Hidden 1, Hidden 2, Output
export const ModelTrainingView = () => {
// 状态管理
const [phase, setPhase] = useState<'IDLE
生成一个训练模型完整的步骤
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 动画常量定义
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const SQUARE_SIZE = 200; // 正方形总大小
const GRID_COUNT = 5; // 5x5网格
const TILE_SIZE = SQUARE_SIZE / GRID_COUNT; // 每个格子大小 40
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2 + 20; // 稍微下移一点留给标题
const TOP_LEFT_X = CENTER_X - SQUARE_SIZE / 2;
const TOP_LEFT_Y = CENTER_Y - SQUARE_SIZE / 2;
// 颜色定义
const COLORS = {
bg: '#0f172a',
stroke: '#38bdf8', // 浅
请帮我生成一个求正方形面积和周长的动画，适合小学生看，生动有
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1280;
const VIEW_HEIGHT = 720;
const BG_COLOR = "#0f172a";
const BOARD_COLOR = "#1e293b";
const TEAM_A_COLOR = "#facc15"; // Yellow
const TEAM_B_COLOR = "#3b82f6"; // Blue
const ACCENT_COLOR = "#10b981"; // Green
const TEXT_COLOR = "#f8fafc";
// --- Utility Components ---
// Standardized Fraction Component
const Fraction = ({ num, den, x, y, size = 24, color = TEXT_COLOR, opacity = 1 }) => (
<g transform
动画《修路大挑战！》 场景1：坑洼土路前，甲队（黄帽，标“1
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 600;
// 调色板
const COLORS = {
bg: '#0f172a',
storeFloor: '#1e293b',
storeWall: '#334155',
table: '#f3e3ce', // 枫木色
device: '#e2e8f0',
screenOn: '#0ea5e9',
poster: '#000000',
locker: '#475569',
lockerActive: '#10b981', // Green for active
jdRed: '#ef4444',
mtYellow: '#f59e0b',
rider: '#06b6d4', // Cyan
path: '#64748b',
text: '#94a3b8',
highlight: '#fffff
描绘的场景：苹果授权的乡镇零售店，店内有专业的苹果桌子，桌面
Playback pauses when you leave
```tsx
'use client';
import React, { useState, useEffect, useMemo } from 'react';
export default function OpticalImagingSciFi() {
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 物理常量
const FOCAL_LENGTH = 160; // 焦距 f
const OBJ_BASE_HEIGHT = 90; // 物体基础高度
// 动画状态
const [time, setTime] = useState(0);
// 动画循环
useEffect(() => {
let animationFrameId;
const animate = () => {
setTime(t =