想要在Web页面中绘制背景图案，我们首先可能想到的是使用 CSS，可能你也有所尝试，比如简单的渐变到复杂的网格、点阵等，SVG 中也有绘制背景图案的解决方案。

人类的视觉比较容易被变化所吸引，尤其是颜色的变化。像上世纪 80 年代的霓虹灯广告牌，我很难不被它所吸引。

平滑的变形动画真的算是 SVG 中的独门武器了。其原理很容易想到。就是不同形状之间能平滑转换，SVG 中的形状其实也是有不同坐标之间的线段绘制而成的。

我更喜欢把这种动画叫做路径跟随动画或者轨迹动画，正如你所看到的，一个元素（物体）沿着特定的路径（轨迹）进行运动。

演示 查看在线版本 Polygon's PlayStation 4 Review vivus.js - svg animation 原理 要实现上面酷炫的描边动画，首先我们需要了解 SVG 中实现描边

为什么选择 GSAP？ 先来看一个 GSAP （GreenSock Animation Platform）介绍，以下动画使用 GSAP 编写： https://codepen.io/GreenSock

一般我们使用 AI、Sketch 等矢量图设计工具导出的 SVG 文件代码相对还是比较“臃肿”的，实际在 Web 页面上使用 SVG 时候，有些标签或者属性是不需要的。比如 title / desc

📃 SVG 文件输出 在编写 SVG 动画前，我们应该先要准备矢量文件，矢量文件包含来我们需要的 SVG 代码，通常我们不会去手写 SVG 代码

📋 SVG 基本介绍 SVG (Scalable Vector Graphics) 如今可缩放的矢量图（SVG）在 Web 页面上充当着重要的角色