CYC-SVGLAB/任務二

元素符號的連續線變形動畫

收集地水火風空(五輪塔)、五行、煉金術、八卦、埃及聖書體的元素符號, 再用一條連續的線:先畫出第一個符號,然後流動變形成下一個,循環不息。 點選下方圖鑑中的 3 到 5 個符號,按播放。

一、符號圖鑑(可點選組合)

這批是「一筆連續線條」版本:每個符號都被重繪成單一路徑,這是變形動畫的前提。點選順序就是變形順序。

二、變形舞台

已選 0 個(需 3–5 個)
選好符號後按播放

引擎原理(零依賴 Vanilla JS):用 getPointAtLength 把每個符號路徑等距取樣成 240 個點; 變形前先做「起點與方向對齊」(在所有旋轉起點與正反方向中,挑總位移最小的那組), 避免變形時線條無謂打轉;再逐幀以緩動函式插值兩組點,餵給同一條 polyline。 任意形狀之間都能變,不受 SVG path 指令結構限制(這是 SMIL morph 做不到的)。

三、參考符號體系(收集成果)

背景研究實抓驗證的碼位與對應關係。圖鑑中的一筆畫版本即從這些體系的幾何描述重繪而來。

五輪塔・五大(地水火風空)

日本五輪塔由下而上:地=方形、水=正圓、火=三角(尖朝上)、風=仰月(碗形、開口朝上)、空=宝珠(圓體頂端收尖)。五大皆無 Unicode 碼位,屬純幾何符號——反而最適合一筆畫。對應梵字種子字:地 a、水 va、火 ra、風 ha、空 kha(Siddham 為書法字形,靠填色不靠線條,不適合線條動畫)。

五行 × 行星符號

符號五行碼位幾何
水(水星)U+263F新月+圓+十字
金(金星)U+2640圓在上、十字在下
火(火星)U+2642圓+右上斜箭頭
木(木星)U+2643似「2」曲線加橫線
土(土星)U+2644上橫、豎筆右彎成鉤

相生相剋圖畫法:五元素置於正五角形頂點,外圈順時針=相生(木→火→土→金→水),內部跨越連線=相剋,軌跡正好構成五芒星——圖鑑裡的五角形與五芒星就是取自這個結構。行星符號因圓與十字是分離部件、必須提筆,不做一筆畫版。

煉金術四元素

符號元素碼位幾何
🜂U+1F702正三角形,尖朝上
🜄U+1F704倒三角形,尖朝下
🜁U+1F701三角+橫線貫穿上半(提筆,不可一筆畫)
🜃U+1F703倒三角+橫線貫穿下半(提筆,不可一筆畫)

八卦(U+2630–U+2637)

字符象徵碼位
U+2630
U+2631
U+2632
U+2633
U+2634
U+2635
U+2636
U+2637

卦是多段分離橫槓,不能一筆畫;但適合另一種節奏——「逐爻依序點亮」,列入後續實驗方向。

埃及聖書體

字符意義Gardiner碼位幾何
𓈖水(漣漪)N35U+13216連續鋸齒折線,天生的一筆開放線條
𓇳太陽N5U+131F3同心雙圓(兩筆)
𓈋N26U+1320B雙峰一谷、底邊封閉,一筆閉合

聖書體字符需系統字型支援才能顯示;圖鑑中的水波與山即依其幾何重繪。

四、素材來源(皆為自由授權,已實抓驗證)