Share animations and export offline HTML files
Back to Blog

Share animations and export offline HTML files

New FeatureX.comSVG Animation
SvgAnimate
SvgAnimate
2025-12-31
6 min

Hi everyone, I am Xuanyuan, the creator of SvgAnimate.

My animation website svganimate.ai has been online for 20 days, and I have seen many interesting animations.

Note: The animations below are publicly shared by users.

This one amazed me first. A user actually built a plane shooter game animation with my site:

Playback pauses when you leave
'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // 常量定义 const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const FPS = 60; const PLAYER_SPEED = 4; const LASER_SPEED = 12; const ENEMY_SPEED = 2.5; const SPAWN_RATE = 0.02; // 颜色定义 const COLORS = { bg: '#0f172a', player: '#38bdf8', // 天蓝 playerLaser: '#ef4444', // 义军红色激光 enemy: '#94a3b8', // 帝国灰 enemyLaser: '#22c55e', // 帝国绿色激光 star: '#ffffff', hud: '#0ea5e9', explosion: '#fbbf24', }; // 类型定义 ty

Generate a Star Wars game animation

Can you believe this is generated from a single sentence? With a bit more interaction, it could be a mini game.

Here is a mechanical dial animation:

Playback pauses when you leave
'use client'; import React, { useState, useEffect, useMemo } from 'react'; export default function SciFiClock() { const [time, setTime] = useState(new Date()); const [frame, setFrame] = useState(0); // 动画循环 useEffect(() => { let animationFrameId; const animate = () => { setTime(new Date()); setFrame(f => f + 1); animationFrameId = requestAnimationFrame(animate); }; animationFrameId = requestAnimationFrame(animate); return () => cancelAni

生成表盘三个指针，包括时针分针秒针

It feels very refined.

Most public animations are about learning and knowledge, for example an animation of a neural network recognizing handwritten digits:

Playback pauses when you leave
'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // 5x7 Pixel grids for digits 0-9 const DIGIT_PATTERNS = { 0: [ 0,1,1,1,0, 1,0,0,0,1, 1,0,0,0,1, 1,0,0,0,1, 1,0,0,0,1, 1,0,0,0,1, 0,1,1,1,0 ], 1: [ 0,0,1,0,0, 0,1,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,1,1,1,0 ], 2: [ 0,1,1,1,0, 1,0,0,0,1, 0,0,0,0,1, 0,0,0,1,0, 0,0,1,0,0, 0,1,0,0,0, 1,1,1,1,1 ], 3: [

神经网络识别手写数字过程

An animation of binary tree traversal:

Playback pauses when you leave
'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ---------------------------------------------------------------------- // CONFIGURATION & CONSTANTS // ---------------------------------------------------------------------- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BACKGROUND_COLOR = '#0f172a'; const PRIMARY_COLOR = '#38bdf8'; // Sky blue const ACTIVE_COLOR = '#f59e0b'; // Amber/Orange const VISITED_COLOR = '#10b981'; // Emerald/Green const LI

模拟一个二叉树的便利过程，节点在被访问时变色，背景使用深色网

An animation that explains the working mechanism of a MOSFET transistor:

Playback pauses when you leave
'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; export default function TransistorWorkingPrinciple() { const [phase, setPhase] = useState(0); // 0: Off, 1: Gate Charging, 2: Channel Formed, 3: Conducting const [electrons, setElectrons] = useState([]); const requestRef = useRef(); // 模拟生命周期：循环展示工作原理 useEffect(() => { const timer = setInterval(() => { setPhase((prev) => (prev + 1) % 4);

生成一个晶体管工作原理动画

An animation of the periodic table:

Playback pauses when you leave
```javascript 'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; // ---------------------------------------------------------------------- // 1. 配置与数据生成 (Configuration & Data) // ---------------------------------------------------------------------- const VIEW_WIDTH = 1400; const VIEW_HEIGHT = 800; const CELL_SIZE = 44; // 稍微增大一点 const GAP = 6; // 计算表格总宽度: 18列 * (44+6) - 6 = 894 // 居中计算: (1400 - 894) / 2 = 253 const START_X = 253; const START_Y = 140; // 元素分类

画一个完整的元素周期表

Some of these animations are interactive, like the one below:

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 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

月相的变化，设置农历初一、初三、初五、初七、初十、十五、十八

This is a moon phase demo. You can click the panel in the top right to choose different dates and see the phase changes.

But once you export to GIF or video, the interaction is lost and it becomes a static image.

Many users want interactive animations, so today I am introducing a new feature: export an animation as a standalone HTML file with one click.

On the animation detail page and the creation page, there is a new Share button in the top right. Clicking it opens a dropdown menu. In that menu you can generate a share link, share directly to X, and download a full HTML file to open locally.

You can download it, send it, or copy it anywhere. As long as you open it in a browser, it plays with full interaction, which is great for teaching demos.

For example, the periodic table animation above can be made interactive with a set of category buttons. Clicking a button highlights the related elements:

Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react'; // ---------------------------------------------------------------------- // CONSTANTS & DATA // ---------------------------------------------------------------------- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const CELL_SIZE = 52; // Slightly smaller to create more tech-density const GAP = 8; const THEME = { bg: '#0f172a', // Slate 900 grid: '#1e293b', // Slate 800 textPrimary: '#f8fafc', textSecondary: '#64

创建一个完整的元素周期表，下面展示惰性气体、卤素、金属等常见分类按钮，做成可交互动画，当用户点击分类按钮的时候，元素周期表中的对应元素进行高亮展示。下面的一组按钮距离面板太近了，往下挪一点。另外高亮只需要把对

Another example is a quadratic function animation. You can drag sliders for the three parameters and observe the curve change in real time:

Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo } from 'react'; // 视图常量 const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const ORIGIN_X = VIEW_WIDTH / 2; const ORIGIN_Y = VIEW_HEIGHT / 2 + 60; // 坐标原点下移，留出上方空间 const SCALE = 30; // 缩放比例 // 科技感配色方案 const COLORS = { bg: '#0f172a', // 深蓝灰背景 gridMain: '#334155', // 主网格 gridSub: '#1e293b', // 次网格 axis: '#94a3b8', // 坐标轴 primary: '#38bdf8', // 主色调（天蓝）- 曲线 primaryGlow: '#0ea5e9',// 发光色 secondary: '#f472b6', /

修改这个动画，现在参数面板拖动的时候响应位置和滑动条的圆点位

More ideas for interactive animations are up to you to explore.

Right now my website has more than 2,500 registered users, with over 4,000 animations created, and more than 300 published publicly:

Thank you so much for your support! If you have any suggestions, feel free to reach out.

My X: @xuanyuanzhifeng

My WeChat: xuanyuanuncle

SvgAnimate

SvgAnimate

SvgAnimate Contributor