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 = 1920;
const VIEW_HEIGHT = 1080;
const BG_COLOR = '#3b3b3b';
// 管线类型定义
const PIPELINE_TYPES = {
ELECTRICITY: { id: 'elec', label: '电力管网', color: '#00ffff', speed: 20 }, // 青色/快
GAS: { id: 'gas', label: '燃气管网', color: '#ffaa00', speed: 35 }, // 橙色/中
HEAT: { id: 'heat', label: '热力管网', color: '#ff3366', speed: 45 }, // 红色/慢
WATER: { id: 'water', label: '给排水网', color: '#0088ff', s
创建一个 用于城市生命线项目中的背景动画，要求包含电力，天燃
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- 常量定义 ---
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const LEFT_CENTER_X = VIEW_WIDTH * 0.25;
const RIGHT_CENTER_X = VIEW_WIDTH * 0.75;
const CELL_Y = VIEW_HEIGHT / 2;
const DURATION = 45; // 延长一点以展示完整细节
// --- 数学工具 ---
const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
const smoothstep = (min, max, value) => {
const x = clamp((value - min) / (max
一定要体现出基因是选择性表达的合成了特殊的蛋白质。而不是一开
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- 配置常量 ---
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const LEFT_CENTER_X = VIEW_WIDTH * 0.25;
const RIGHT_CENTER_X = VIEW_WIDTH * 0.75;
const CELL_Y = VIEW_HEIGHT / 2;
const DURATION = 35; // 延长动画时间以展示细节
// --- 数学工具函数 ---
const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
const smoothstep = (min, max, value) => {
const x = clamp((value - min) / (ma
早期都是一个骨髓造血干细胞，形态上都是球形，紫色。得到不同的
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a';
// Helper to calculate gear path
const createGearPath = (cx, cy, radius, teeth, toothDepth) => {
let d = "";
const angleStep = (Math.PI * 2) / teeth;
for (let i = 0; i < teeth; i++) {
const angle = i * angleStep;
const nextAngle = (i + 1) * angleStep;
// Tooth dimensions
const outerR = radius + toothDepth;
const inne
Design an SVG representing tea
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const DURATION = 10000; // 10秒倒计时循环
const PARTICLE_COUNT = 30;
export default function TechHourglass() {
// 动画驱动状态
const [tick, setTick] = useState(0);
// 核心数据 Ref (避免重渲染时的闭包陷阱)
const stateRef = useRef({
startTime: Date.now(),
isPlaying: true,
progress: 0, // 0 to 1
particles: Array.from({ length: PARTICLE_COUNT }).map(() => ({
x: 0,
y: 0,
沙漏倒计时
Playback pauses when you leave
import React, { useEffect, useRef, useMemo } from 'react';
const NeuronSimulation = () => {
const canvasRef = useRef(null);
const containerRef = useRef(null);
// Animation state refs (mutable, no re-renders)
const stateRef = useRef({
pulses: [], // { type: 'dendrite'|'axon', pathIndex: 0, progress: 0, speed: 0.01 }
particles: [], // Background floating particles
energy: 0, // Soma energy accumulation
time: 0,
labels: [
{ text: "树突 (Dendrites)", sub: "信号接收 /
画一个神经元结构图，包括树突、轴突等结构
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 + 50; // 稍微下移，留出上方空间给控制面板
const SCALE = 30; // 1单位 = 30像素
// 颜色定义
const COLORS = {
bg: '#0f172a',
grid: '#1e293b',
axis: '#64748b',
primary: '#38bdf8', // 天蓝 - 曲线
secondary: '#f472b6', // 粉色 - 顶点
text: '#94a3b8',
sliderTrack: '#334155',
sliderThumb: '#e2e8f0',
};
// 工具函数：逻辑坐
创建一个可交互动画，上面显示一组按钮：a、b、c，分别显示为
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Constants & Config ---
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const TILE_SIZE = 40;
const GRID_W = VIEW_WIDTH / TILE_SIZE;
const GRID_H = VIEW_HEIGHT / TILE_SIZE;
const FPS = 60;
// Directions: 0: Up, 1: Right, 2: Down, 3: Left
const DIRS = [
{ x: 0, y: -1 },
{ x: 1, y: 0 },
{ x: 0, y: 1 },
{ x: -1, y: 0 },
];
// Game Entities Types
type EntityType = 'player' | 'enemy' | 'bullet' | 'base' | 'brick' |
生成一个红白机游戏动画：坦克大战，通过键盘上下左右键控制坦克
Sponsored
AdsPlayback pauses when you leave
'use client';
import React, { useRef, useEffect, useState, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const TILE_SIZE = 40;
const COLS = VIEW_WIDTH / TILE_SIZE;
const ROWS = VIEW_HEIGHT / TILE_SIZE;
// 游戏常量
const GAME_SPEED = 2.5; // 玩家速度
const BULLET_SPEED = 6;
const ENEMY_SPEED = 1.5;
const ENEMY_SPAWN_RATE = 2000; // ms
const MAX_ENEMIES = 4;
// 方向枚举
const DIR = { UP: 0, RIGHT: 1, DOWN: 2, LEFT: 3 };
const DX = [0, 1, 0, -1];
const DY = [-1, 0, 1, 0];
// 地图元
生成一个红白机游戏动画：坦克大战，通过键盘上下左右键控制坦克
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = '#0f172a'; // Slate-900
// Locations
const POS_UNTRUST = { x: 100, y: 300 };
const POS_FIREWALL = { x: 400, y: 300 };
const POS_SERVER = { x: 850, y: 300 };
模拟防火墙的工作过程,untrust区域的用户只能通过端口转
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
const PRIMARY_COLOR = "#38bdf8"; // Cyan/Blue
const ACCENT_COLOR = "#facc15"; // Yellow (Nutrients)
const DANGER_COLOR = "#ef4444"; // Red (Acid/Heat)
const FOOD_COLOR_START = "#ffffff";
const FOOD_COLOR_STOMACH = "#fde047";
const FOOD_COLOR_POOP = "#5d4037";
// --- Math Helpers ---
const lerp = (start, end, t) => start * (1 - t) + end * t;
const ea