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 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 = 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 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'
},
{
月相的变化，设置农历初一、农历初七、农历十五、农历二十二，四
Sponsored
AdsPlayback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// 常量定义
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
const MOON_RADIUS = 120;
const CENTER_X = 350; // 月球中心X
const CENTER_Y = 300; // 月球中心Y
// 目标农历日期
const TARGET_DAYS = [1, 3, 5, 7, 10, 15, 18, 20, 23, 25, 27, 30];
// 辅助函数：生成星星
const generateStars = (count) => {
return Array.from({ length: count }, () => ({
x: Math.random() * VIEW_WIDTH,
y: Math.random() * VIEW_HEIGHT,
r: Math
月相的变化，设置农历初一、初三、初五、初七、初十、十五、十八
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
const VIEW_WIDTH = 1000;
const VIEW_HEIGHT = 600;
// 农历月相数据配置
const PHASES = [
{ day: 1, name: '初一', label: '新月 (New Moon)', visible: 0 },
{ day: 3, name: '初三', label: '蛾眉月 (Waxing Crescent)', visible: 0.15 },
{ day: 7, name: '初七', label: '上弦月 (First Quarter)', visible: 0.5 },
{ day: 15, name: '十五', label: '满月 (Full Moon)', visible: 1.0 },
{ day: 22, name: '廿二', label: '下弦月 (Third Quarte
月相的变化，设置农历初一、初三、初七、十五、二十二、二十七、
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600;
const MOON_RADIUS = 140; // 稍微增大月球尺寸以增强视觉冲击力
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2 - 20;
// 星星生成逻辑
const generateStars = (count) => {
return Array.from({ length: count }, () => ({
x: Math.random() * VIEW_WIDTH,
y: Math.random() * VIEW_HEIGHT,
size: Math.random() * 1.5 + 0.5,
opacity: Math.random() * 0.8
月球的月相变化，可以3D立体呈现
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
// 视图常量
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 800;
const CENTER_X = VIEW_WIDTH / 2;
const CENTER_Y = VIEW_HEIGHT / 2;
// 行星配置数据
const PLANETS_DATA = [
{ name: "水星", en: "Mercury", color: "#A5A5A5", size: 6, orbitX: 70, orbitY: 60, speed: 2.5, type: 'rock' },
{ name: "金星", en: "Venus", color: "#E3BB76", size: 10, orbitX: 110, orbitY: 95, speed: 1.8, type: 'rock' },
{ name: "地球", en: "Earth", color: