SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
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
帮我生成一个小学数学相遇问题的动画
移开即停止播放
'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: "信号接收 /
画一个神经元结构图，包括树突、轴突等结构
移开即停止播放
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，分别显示为
广告
Ads移开即停止播放
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' |
生成一个红白机游戏动画：坦克大战，通过键盘上下左右键控制坦克
移开即停止播放
'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];
// 地图元
生成一个红白机游戏动画：坦克大战，通过键盘上下左右键控制坦克
移开即停止播放
'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区域的用户只能通过端口转
移开即停止播放
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