SVG动画案例库
浏览精选的SVG动画案例
移开即停止播放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编程语言 30 年巅峰对决 - TIOBE 历史排名</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Sans+SC:wght@400;700&display=swap');
:root {
--bg: #0F17
用折线图展示C、C++、Java、Python等主流编程语言
2
移开即停止播放
<!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>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');
:root {
--bg-color: #FDFBF7;
--primary: #8B1A1A;
--secondary: #2C3E50;
--accent: #D4AF37;
--text-main: #FFFFFF;
--text-sub: rg
直接把名字写到圆圈里面，去掉圆圈里的图标
2
移开即停止播放
<!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>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
:root {
--bg-dark: #0F172A;
--bg-card: #1E293B;
--primary: #10B981; /* 跌 */
--secondary: #EF4444; /* 涨 */
--accent: #3B82F6
用 SVG 实现一个股票市场 Treemap（矩形树图）可视
2
移开即停止播放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SaaS 用户转化漏斗分析</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
:root {
--bg: #0F172A;
--primary: #3B82F6;
--secondary: #10B981;
--accent: #F59E0B;
--danger: #EF4444;
--glass: rgba(30, 41,
用 SVG 实现一个现代化漏斗可视化，展示用户从浏览、点击、
2
移开即停止播放
<!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://unpkg.com/lucide@latest"></script>
<style>
:root {
--bg-dark: #0F172A;
--panel-bg: rgba(30, 41, 59, 0.8);
--primary: #38BDF8;
--accent-red: #F43F5E;
--accent-gree
制作一个基于 SVG 地铁线路图的动态客流可视化。要求地铁线
2
移开即停止播放
<!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>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap');
:root {
--bg: #0F172A;
--primary: #3B82F6;
--sec
用 SVG 制作一个动态关系网络图，展示某个用户与朋友、群组
2
移开即停止播放
<!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>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;700&display=swap');
:root {
--bg-color: #0F172A;
制作一个基于 SVG 的折线图时间动画，展示“全球互联网用户
2
移开即停止播放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D世界经济体排名可视化</title>
<style>
:root {
--bg-color: #05080f;
--panel-bg: rgba(13, 25, 48, 0.8);
--accent-color: #00f2ff;
--text-main: #e2e8f0;
--text-dim: #64748b;
}
body, html {
margin: 0;
padding: 0;
width: 100%;
用3D立体饼图展示世界经济体排名
166
移开即停止播放
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { TrendingUp, Globe, BarChart3, Activity } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
const MARGIN = { top: 80, right: 120, bottom: 60, left: 180 };
const BAR_HEIGHT = 40;
const BAR_GAP = 15;
const COUNTRIES = [
{ id: 'USA', name: '美国', color: '#3b82f6', flag: '🇺🇸' },
{ id: 'CHN', name: '中国', color: '#ef4444', flag: '🇨🇳' },
{ id: 'JPN'
生成2015至2025近十年大国GDP动态对比， 数据排名要
686
移开即停止播放
'use client';
import React, { useState, useEffect, useMemo, useRef } from 'react';
const WIDTH = 1000;
const HEIGHT = 600;
const PADDING = { top: 60, right: 100, bottom: 100, left: 60 };
const CHART_WIDTH = WIDTH - PADDING.left - PADDING.right;
const CHART_HEIGHT = HEIGHT - PADDING.top - PADDING.bottom;
const PRICE_HEIGHT = CHART_HEIGHT * 0.7;
const VOL_HEIGHT = CHART_HEIGHT * 0.25;
const VOL_TOP = PRICE_HEIGHT + 30;
// Helper: Generate realistic market data with a specific narrative
const ge
1. 位置要对：要么是绝对底部（长期下跌后），要么是相对底部
205
广告
Ads已经到底了