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)。
游標移上去時，圓形遮罩從中心擴大，露出下方的內容；游標移開後再收合：流暢且偏快。
兩個圖層保持完全相同的尺寸，避免任何位移；鍵盤聚焦和點按時也顯示同樣的顯現效果。