SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 常量定义
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const EARTH_X = 500;
const EARTH_Y = 350;
const ORBIT_RADIUS = 220;
const MOON_RADIUS = 18;
const EARTH_RADIUS = 40;
// 农历关键节点
const KEY_DATES = [
{ day: 1, label: '初一', name: '新月', en: 'New Moon' },
{ day: 3, label: '初三', name: '蛾眉月', en: 'Waxing Crescent' },
{ day: 7, label: '初七', name: '上弦月', en: 'First Quarter' },
{ day: 15, lab
标题：月相变化与月球什么运动有关，设置农历初一、农历初三、农
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// ==========================================
// 配置常量
// ==========================================
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const MOON_CYCLE = 29.53;
const COLORS = {
bg: '#0e1b3a',
grid: 'rgba(56, 189, 248, 0.1)',
textMain: '#e2e8f0',
textAccent: '#38bdf8', // 天蓝色高亮
textDim: 'rgba(148, 163, 184, 0.6)',
moonLight: '#f1f5f9',
moonShadow: '#0f172a',
highligh
月相的变化规律，设置农历初一、初三、初五、初七、初十、十五、
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BEAKER_X = VIEW_WIDTH / 2;
const BEAKER_Y = VIEW_HEIGHT / 2 + 50;
const BEAKER_WIDTH = 300;
const BEAKER_HEIGHT = 350;
const WATER_LEVEL = 250; // Height of water from bottom of beaker
// Particle Types
type ParticleType = 'bubble' | 'spark' | 'smoke' | 'trail';
interface Particle {
id: number;
x: number;
y: number;
vx: number;
vy: number;
lif
请生成一个 金属钠在水中发生化学反应的动画
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 = 400; // Earth Center X
const CENTER_Y = 300; // Earth Center Y
const ORBIT_RADIUS = 180;
const SUN_X = -100; // Sun is far left
const SUN_Y = 300;
// Phase Data Configuration
const PHASES = [
{ id: 0, name: '新月 (朔)', label: '农历初一', angle: 0, type: 'New Moon' },
{ id: 1, name: '蛾眉月', label: '农历初三', angle: 45, type: 'Waxing Crescent' },
{ id
月相的变化，设置农历初一、农历初三、农历初七、农历十五、农历
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BG_COLOR = "#0f172a";
const ACCENT_COLOR = "#38bdf8"; // Sky 400
const TEXT_COLOR = "#94a3b8"; // Slate 400
const SUN_COLOR = "#f59e0b"; // Amber 500
const MOON_COLOR = "#e2e8f0"; // Slate 200
const ORBIT_COLOR = "rgba(148, 163, 184, 0.2)";
const LUNAR_PHASES = [
{ day: 1, name: "新月 (朔)", type: "new" },
{ day: 4, name: "蛾眉月", type: "waxing-crescent" },
月相的变化，设置农历初一到三十，30个按钮，点击后中间显示月
Playback pauses when you leave
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 物理/动画参数配置
const CONFIG = {
sunRadius: 45,
earthOrbitRx: 320, // 地球轨道长半轴
earthOrbitRy: 180, // 地球轨道短半轴
earthRadius: 16,
earthSpeed: 0.2, // 地球公转速度
moonOrbitRadius: 40,
moonRadius: 6,
moonSpeed: 2.5, // 月球绕地速度
};
export const SolarSystemView = () => {
const [time, setTime] = useState(0)
创建一个太阳系模型：中心是一个黄色的太阳，地球沿着椭圆轨道围
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const COLORS = {
thesis: '#06b6d4', // Cyan (Thesis)
antithesis: '#f43f5e', // Rose (Antithesis)
synthesis: '#8b5cf6', //
绘制事物发展过程中，矛盾运动的动态示意图。
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 辅助函数：生成随机数
const random = (min: number, max: number) => Math.random() * (max - min) + min;
// 粒子类型定义
interface Particle {
id: number;
x: number;
y: number;
size: number;
speedY: number;
opacity: number;
phase: number;
}
// 信号包类型
interface SignalPacket {
id: number;
progress: number; // 0 to 1
direction: 'toSH' | 'toCS'; // Changsha to Sh
女孩去了湖南省长沙市的中南大学，男孩去了上海市的上海交通大学
Sponsored
AdsPlayback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 视图常量
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 800;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 行星数据配置 (为了视觉效果，比例并非完全真实，而是经过艺术调整)
// speed: 轨道角速度, distance: 轨道半径, size: 行星大小, color: 颜色
const PLANETS_DATA = [
{ name: '水星 (Mercury)', speed: 4.1, distance: 70, size: 4, color: '#A5A5A5', type: 'rocky' },
{ name: '金星 (Venus)', speed: 1.6, distance: 100, size: 7, color: '#E3BB76',
太阳系的九大行星运行图
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const SEA_LEVEL = 450;
// Utility for random numbers
const random = (min, max) => Math.random() * (max - min) + min;
// Types and Enums
type Phase = 'EVAPORATION' | 'CONDENSATION' | 'PRECIPITATION';
interface Particle {
id: number;
x: number;
y: number;
vx: number;
vy: number;
life: number;
maxLife: number;
type: 'vapor' | 'rain';
size: numbe
生成雨水形成的过程
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 辅助函数：角度转弧度
const toRad = (deg) => (deg * Math.PI) / 180;
// 农历相位数据
const PHASES = [
{
id: 0,
name: '新月 (朔)',
date: '农历初一',
angle: 0,
desc: '月球位于地球和太阳之间，暗面朝向地球。',
english: 'New Moon'
},
{
id: 1,
name: '上弦月',
date: '农历初七',
angle: 90,
desc: '月球与太阳形成90度角，右半边亮。',
english: 'First Quarter'
},
{