SVG Animation Examples Gallery
Browse featured svg animation examples
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
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER = { x: VIEW_WIDTH / 2, y: VIEW_HEIGHT / 2 };
const RADIUS = 220;
// Helper: Generate random range
const random = (min, max) => Math.random() * (max - min) + min;
// Agent Types configuration
const AGENT_CONFIGS = [
{ id: 0, role: 'Architect', label: '架构师', color: '#38bdf8', icon: 'A' },
{ id: 1, role: 'Developer', label: '开发者', color: '#818cf8'
帮我生成 AI 智能体，互相协作的动画
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// --- Constants & Config ---
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 675; // 16:9 Aspect Ratio
const TOTAL_DURATION = 35000; // 35 seconds total
// Colors
const COLORS = {
bg: "#0f172a",
cellMembrane: "#cbd5e1", // Slate 300
nucleus: "rgba(255, 255, 255, 0.2)",
dnaStrand: "#94a3b8",
geneRed: "#ef4444", // Hemoglobin
geneBlue: "#3b82f6", // Muscle
geneGreen: "#22c55e", // Ner
1. 开场：受精卵细胞（5秒） 画面：一个圆润的受精卵细胞（
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 450;
const BLOCK_SIZE = 40;
const GRID_COLS = 14;
const GRID_ROWS = 5;
const TOTAL_BLOCKS = GRID_COLS * GRID_ROWS;
// 动画阶段枚举
const PHASE = {
RAINING: 0,
STABILIZE: 1,
SHOW_1x1: 2,
SHOW_2x2: 3,
RESET: 4,
};
export default function GeometryRain() {
// 渲染状态：用于触发组件重绘
// 我们只存储可视化的必要数据，避免冗余
const [blocks, setBlocks] = useState([]);
const [ph
许多1×1的小方块如雨点般落下，铺满屏幕下方。 其中一个小
Sponsored
AdsPlayback 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 = 1000;
const VIEW_HEIGHT = 600;
// 动画周期配置 (单位: ms)
const DURATION_MOVE = 4000;
const DURATION_PAUSE = 3000;
const DURATION_RESET = 1000;
const TOTAL_CYCLE = DURATION_MOVE + DURATION_PAUSE + DURATION_RESET;
// 数学参数
const TOTAL_DISTANCE = 1000; // km
const SPEED_A = 90; // km/h
const SPEED_B = 60; // km/h
const TOTAL_SPEED = SPEED_A + SPEED_B;
const MEET_TIME = TOTAL_DISTANCE / TOTAL_SPEED; // hours
export c
帮我生成一个小学数学相遇问题的动画
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const SUN_RADIUS = 60;
const EARTH_RADIUS = 30;
const MOON_RADIUS = 12;
const MOON_ORBIT_RADIUS = 200;
export default function SolarEclipseView() {
// 静态资源：星星背景
const stars = useMemo(() => {
return Array.from({ length: 150 }, () => ({
x: Math.random() * VIEW_WIDTH,
y: Math.random() * VIEW_HEIGHT,
size: Math.random() * 2 + 0.5,
opa
绘制日食的原理示意图
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,