SVG Animation Examples Gallery
Browse featured svg animation examples
Playback pauses when you leave
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中东地区军事行动模拟推演系统</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #020617;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font
网页动画：美国和以色列对伊朗的军事行动演示 场景 1：中东
241
0
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>沪桂环线自驾游轨迹动画</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
:root {
--bg-color: #ffffff;
--map-fill: #b30000;
--map-stroke: rgba(255, 255, 255, 0.15);
--route-color: #FFD700;
--text-main: #333333;
--text-shadow: rgba(138, 0, 0, 0.9);
生成一个自驾汽车从上海到广西环线旅游的轨迹动图，具体路线顺序
263
0
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>诗圣杜甫：一生漂泊与壮丽诗篇</title>
<style>
:root {
--bg-color: #05080a;
--accent-color: #e2b842; /* 唐代宫廷金 */
--path-color: #4facfe;
--text-primary: #e0e6ed;
--text-secondary: #94a3b8;
--panel-bg: rgba(15, 23, 42, 0.85);
--border-glow: 0 0 15px rgba(226, 184, 6
712年2月12日（唐睿宗景云三年正月一日）/ 巩县瑶湾（一
278
0
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>长江经济带多式联运物流可视化</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
:root {
--bg-deep: #050a14;
--land-fill: #0f172a;
--land-stroke: #334155;
--text-main: #ffffff;
--text-sub: #94a3b8;
--accent-cyan: #06b6d4;
--accent-yellow: #
1.在卫星地图上先设定六个坐标点：重庆果园港、武汉阳逻港、江
337
0
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>古代文明分布图谱 - Ancient Civilizations</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');
:root {
--bg-paper: #FDFBF7;
--primary-ink: #7C2D12;
--secondary-ink: #451A03;
--accent-gold: #D4AF37;
--text-gray: #
创建一个讲解古代文明分布的视频
417
0
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨越巅峰：从好望角到火地岛的全球征途</title>
<style>
:root {
--bg-color: #0f172a;
--primary-color: #fbbf24;
--secondary-color: #38bdf8;
--accent-color: #ef4444;
--text-main: #f8fafc;
--font-family: 'Montserrat', 'PingFang SC', sans-serif;
}
body, html {
一个人从地球上好望角出发，经过非洲大陆、亚洲大陆，通过白令海
401
0
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Expedition: Cape to Cape</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
:root {
--bg-color: #0F172A;
--primary: #38BDF8;
--
一个人从地球上好望角出发，经过非洲大陆、亚洲大陆，通过白令海
2.3K
0
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>四川旅游数据可视化</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
:root {
--bg-dark: #0f172a;
--bg-panel: rgba(30, 41, 59, 0.7);
--primary: #38bdf8; /* Sky blue */
--accent: #00f2ff; /* Cyan glow */
--gold: #ffd700; /* Gold trace */
--text-
画面开始是中国地图，然后镜头推近道四川，一道金色光芒绕四川省
2.4K
0
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一带一路：海上丝绸之路航行演示</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #0f172a;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-family
画一个3D旋转地球，在上面画出一艘船从中国上海出发，经过东海
2.9K
0
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// 1. 数据与常量配置
// -----------------------------------------------------------------------------
// 历史节点数据：抗日战争关键战役与进程
const HISTORICAL_EVENTS = [
{
name: "沈阳", year: 1931, type: "start",
要显示完整的中国地图，副标题改为“日本侵华历史轨迹（1931
942
0
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
import * as d3 from 'd3';
// -----------------------------------------------------------------------------
// Constants & Data
// -----------------------------------------------------------------------------
const LONG_MARCH_PATH = [
{
name: "瑞金",
year: "1934.10
绘制一个红军长征运动轨迹动画
910
0