SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
// 动画数据定义
const SCENES = [
{
id: 0,
year: "1956",
era: "The Awakening",
title: "启蒙时代",
subtitle: "The Birth of AI",
desc: "达特茅斯会议正式提出 Artificial Intelligence 概念。图灵测试 (Turing Test) 定义了机器智能的边界，符号主义开始萌芽。",
icon: "Binary",
shape: "circle"
},
{
id: 1,
year: "1980s",
era: "Symbolic
生成一个讲解AI发展历史的动画，分几幕依次讲解，每一幕播放2
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
export const FirewallBreach = () => {
const [progress, setProgress] = useState(0);
const [status, setStatus] = useState('SCANNING'); // SCANNING, INJECTING, BREACHED
const [logs, setLogs] = useState([]);
const [activeNodes, setActiveNodes] = useState([]);
// Refs for animation loop values to avoid re-rend
制作一个黑客攻破系统防火墙的动画
Playback pauses when you leave
'use client';
import React, { useMemo } from 'react';
import { motion } from 'framer-motion';
import { Scale, Activity, Droplets, Leaf, Wind, Snowflake, Flame, Mountain } from 'lucide-react';
// -----------------------------------------------------------------------------
// 子组件：太极符号 (SVG)
// -----------------------------------------------------------------------------
const TaijiSymbol = () => {
return (
<motion.div
style={{
width: 120,
height: 120,
borderRa
讲解一下中医的理论基础
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
Sponsored
AdsPlayback 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' |