SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
```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
一定要体现出基因是选择性表达的合成了特殊的蛋白质。而不是一开
移开即停止播放
```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
早期都是一个骨髓造血干细胞，形态上都是球形，紫色。得到不同的
移开即停止播放
'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 智能体，互相协作的动画
移开即停止播放
```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秒） 画面：一个圆润的受精卵细胞（
移开即停止播放
```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的小方块如雨点般落下，铺满屏幕下方。 其中一个小
移开即停止播放
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
移开即停止播放
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
帮我生成一个小学数学相遇问题的动画
广告
Ads移开即停止播放
'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
绘制日食的原理示意图
移开即停止播放
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,
沙漏倒计时
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// V12 Firing Order (Example: 1-12-5-8-3-10-6-7-2-11-4-9)
// Defining offsets in degrees for when each cylinder hits Top Dead Center (Combustion)
// A 4-stroke cycle is 720 degrees. V12 fires every 60 degrees.
const FIRING_ORDER_OFFSETS = {
1: 0, 12: 60,
5: 120, 8: 180,
3: 240, 10: 300,
6: 360, 7: 420,
2: 480, 11: 540,
4: 600, 9: 660
};
// Cylinder Layo
制作一个V12发动机运动的过程
移开即停止播放
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: "信号接收 /