開源 SVG 動畫選品
58 個,全部是知名開源圖標庫的現成動畫(MIT 授權),不是手畫的。
點任何一張卡片,它會出現在下方兩條擬真選單列(亮/暗)讓你看 17px 實際大小的效果。
彩色的 Meteocons 區僅供動畫品味參考。
一、呼吸與脈動系——你說的「活著的呼吸感」 (12 個)
忽明忽滅、一漲一縮,最接近錄音霸紅點與 Claude logo 的生命感。單色 currentColor,可直接進選單列。
脈搏 2
svg-spinners:pulse-2
脈搏 3
svg-spinners:pulse-3
脈動環
svg-spinners:pulse-ring
雙層漣漪
svg-spinners:pulse-rings-2
三層漣漪
svg-spinners:pulse-rings-3
多層漣漪
svg-spinners:pulse-rings-multiple
二、守夜系——月亮、星星、日夜(星夜兼程路線) (10 個)
line-md 為單色線稿、自帶循環動畫,可直接進選單列;語意與「守夜防睡」最貼。
月亮・星光閃爍
line-md:moon-loop
月亮・雙色
line-md:moon-twotone-loop
月亮・繁星
line-md:moon-alt-loop
月升
line-md:moon-rising-loop
月升・雙色
line-md:moon-rising-twotone-loop
星星脈動
line-md:star-pulsating-loop
星星脈動・雙色
line-md:star-pulsating-twotone-loop
太陽・光芒輪轉
line-md:sunny-loop
日出
line-md:sun-rising-loop
日夜切換
line-md:light-dark-loop
三、咖啡系——專業版的「裊裊蒸氣」長這樣 (5 個)
同樣是咖啡杯冒煙,職業選手畫的蒸氣循環。若最後決定留在咖啡霸本名,這就是現成答案。
咖啡・蒸氣
line-md:coffee-loop
咖啡・雙色蒸氣
line-md:coffee-twotone-loop
咖啡・半杯
line-md:coffee-half-empty-twotone-loop
咖啡・實心
line-md:coffee-filled-loop
啤酒杯(彩蛋)
line-md:beer-loop
四、時間與運轉系——「還在工作」的直覺符號 (9 個)
時鐘指針真的在走、齒輪真的在轉;風車=你說的板手慢轉的優雅版。
時鐘・指針走動
svg-spinners:clock
齒輪・實心
line-md:cog-filled-loop
紙風車
svg-spinners:wind-toy
轉速表
line-md:speedometer-loop
蝕・追光
svg-spinners:eclipse
半蝕
svg-spinners:eclipse-half
五、經典生命感 loader——通用但耐看 (14 個)
通用型「還活著」指示。放選單列偏抽象,但動畫品質都是業界驗證過的。
三點呼吸
svg-spinners:3-dots-fade
三點彈跳
svg-spinners:3-dots-bounce
音量條
svg-spinners:bars-scale-fade
彈跳球
svg-spinners:bouncing-ball
公轉點
svg-spinners:dot-revolve
半環旋轉
svg-spinners:180-ring
伸縮環
svg-spinners:ring-resize
熔岩球 1
svg-spinners:gooey-balls-1
熔岩球 2
svg-spinners:gooey-balls-2
方塊洗牌
svg-spinners:blocks-shuffle-3
方塊波浪
svg-spinners:blocks-wave
三球循環
loaders:ball-triangle
六、Meteocons 動態感標竿——彩色,僅供「動起來的品味」參考 (8 個)
Bas Milius 的動畫天氣圖標,公認的 SVG 動畫天花板。彩色不能直接進選單列(需重工成單色),放這裡是給動畫節奏當標竿。
流星
meteocons:falling-stars
閃電
meteocons:lightning-bolt
來源與授權(皆為 MIT,可自由使用於 app):
・SVG Spinners — Utkarsh Verma(https://github.com/n3r4zzurr0/svg-spinners)
・Material Line Icons(line-md)— Vjacheslav Trushkin(https://github.com/cyberalien/line-md)
・SVG Loaders — Sam Herbert(https://github.com/SamHerbert/SVG-Loaders)
・Meteocons — Bas Milius(https://github.com/basmilius/weather-icons)
圖標經 Iconify API 取得(https://iconify.design)。本頁全部內嵌,離線可看。