SVG & Shape

一团有机形状持续不断地改变自身轮廓。

在[应用位置]添加“液态变形”(Blob Morph)循环动画，也叫 morphing blob 或 animated blob。
一团有机形状一边缓缓转动，一边不停地慢慢改变轮廓：流畅柔和，没有尖角。
循环要无缝衔接，形状不能跳变；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则保持静止。

借助模糊与对比度滤镜，相邻的形状像液滴一样相互融合。

在[应用位置]添加“粘滞融合”(Gooey Effect)效果，也叫 goo effect 或元球(metaballs)。
指针悬停时，小液滴像液体一样从主体上拉长后脱离；指针移开后，它们流回来并平滑地融合在一起。
模糊加对比度滤镜只作用于这一小组形状，不要作用于整个页面；键盘聚焦和点按时也显示同样的效果。

汉堡菜单等图标通过线条的旋转和移动变成另一个图标（X）。

在[应用位置]添加“图标变形”(Icon Morph)，也叫汉堡变 X(hamburger to X)或 menu icon morph。
每次按下时，上下两条线先一起滑到中间，再旋转成 X，中间那条线同时淡出；再按一次则反向还原：干脆利落。
做成真正的切换按钮，无障碍标签和展开状态随之变化；图标尺寸保持固定，周围内容不发生位移。

通过为虚线偏移添加动画，让 SVG 描边看起来沿路径被画出来。

在[应用位置]添加“线条绘制”(Line Drawing)动画，也叫路径绘制(path drawing)或自绘 SVG(self-drawing SVG)。
每条描边看起来沿路径从起点到终点顺滑地自己画出来，第二条描边（比如对勾）紧跟在第一条之后。
进入视口时只播放一次，不要循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的线条。

元素沿自定义曲线路径移动，并可随路径旋转朝向。

在[应用位置]添加“运动路径”(Motion Path)动画，也叫 animate along path。
一个小元素沿自定义曲线路线缓慢、匀速地移动，并随时转向前进的方向。
使用闭合路线，让循环重复时没有跳变；路线要随容器缩放，而不是固定尺寸。

小圆点或图标沿圆形轨道绕中心旋转。

在[应用位置]添加“环绕轨道”(Orbiting Circles)，也叫 orbit animation 或 orbiting icons。
小圆点沿圆形轨道缓慢、匀速地绕中心元素旋转，外圈则以更慢的速度反向旋转。
循环要无缝，环绕的元素始终保持正立；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止旋转。

一个矢量形状平滑地变成另一个形状。

在[应用位置]添加“形状变形”(Shape Morph)，也叫路径变形(path morphing)或 SVG morph。
一个形状平滑地变成另一个形状，比如五边形向内收缩成星形，各个点以均匀、从容的节奏滑到位置上。
让两个形状拥有数量相同且一一对应的点，使变形干净、不闪烁；每次状态变化时播放一次，不要循环。

SVG 滤镜用动态噪声让文字或形状发生扭曲。

在[应用位置]添加“SVG置换扭曲”(SVG Displacement Distortion)悬停效果，也叫置换贴图效果(displacement map effect)。
指针悬停时，文字或形状像隔着流动的水一样荡漾晃动，效果柔和地渐入；指针移开后恢复清晰。
只在效果激活时应用扭曲滤镜，静止时不产生任何开销；键盘聚焦时也显示同样的效果。

遮罩形状划过或跟随指针，露出下方的内容。

在[应用位置]添加“SVG遮罩显现”(SVG Mask Reveal)悬停效果，也叫 clip-path reveal 或聚光灯遮罩(spotlight mask)。
指针悬停时，圆形遮罩从中心扩大，露出下方的内容；指针移开后再收拢：流畅且较快。
两个图层保持完全相同的尺寸，避免任何位移；键盘聚焦和点按时也显示同样的显现效果。