SVG Animation Examples Gallery
Browse featured svg animation examples
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://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3"></script>
<style>
:root {
--bg-dark: #05080a;
--panel-bg: rgba(10, 20, 30, 0.85);
--accent-cyan: #00f2ff;
--accent-gold: #ffcc33;
沿以下路径生成路径动画，在每个地点上显示详细介绍词： 1.京
11
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://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
:root {
--bg-color: #F8FAFC;
--primary: #005BAC;
--secondary: #10B981;
--accent: #F59E0B;
--map-base: #E2E8F0;
--map-border: #CBD5E1;
--map-highlight: #E0F2FE;
画面从中国地图开始，镜头下移，广东和广西位于画面正中心，然后
65
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>中国省级GDP十强动态监测</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
:root {
--bg-color: #050a10;
--primary-glow: #00f2ff;
--secondary-glow: #7000ff;
--text-color: #e0f7fa;
--panel-bg: rgba(10, 25, 41, 0.85);
--border-color: #1a3a5a;
依次在地图上标注中国（包括台湾）GDP前10的省份，依次进行
139
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：中东
509
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);
生成一个自驾汽车从上海到广西环线旅游的轨迹动图，具体路线顺序
501
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日（唐睿宗景云三年正月一日）/ 巩县瑶湾（一
533
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.在卫星地图上先设定六个坐标点：重庆果园港、武汉阳逻港、江
584
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: #
创建一个讲解古代文明分布的视频
680
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 {
一个人从地球上好望角出发，经过非洲大陆、亚洲大陆，通过白令海
648
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;
--
一个人从地球上好望角出发，经过非洲大陆、亚洲大陆，通过白令海
3.4K
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-
画面开始是中国地图，然后镜头推近道四川，一道金色光芒绕四川省
3.4K