今天想分享的內容會拆分成上、下共兩篇，最終呈現的樣子如下：（是小王子裡吞了大象的蛇！）

事前準備： 一張 SVG 線條圖

本篇主要以 Adobe Illustrator 製作 svg 的步驟來做分享，文末也會附上使用 Figma 的步驟簡介。

第一步：使用鋼筆工具繪製純線條的圖樣

這裡要注意，如果最終想要呈現的效果是筆畫一筆到底，所產出的線條就不能是有重疊或斷開的地方，也就是說，所構成的圖樣需要只使用一條線，並且一氣呵成地勾勒完成。因為 GSAP 的描邊動畫是透過操作 CSS 屬性 strokeDasharray 以及 strokeDashoffset 控制（下一篇會帶入），它們並不會知道重疊的地方究竟要先畫哪裡，因此就會產生沒有連貫的視覺感。

第二步：決定線條是否要轉「外框筆畫」

如果想要製作如首圖的視覺效果，那就可以直接進到第三步了！因為鋼筆工具畫出的線條已經是 <path> 了，我們可以直接用它的d 屬性做動畫，不需要額外處理；但如果想用填色或漸層效果在筆畫的外輪廓線上跑（不是沿著筆畫），此時就會需要轉「外框筆畫」。

第三步：取得 svg 的程式碼（不用真的存成 svg 圖檔）

記得先點選繪製好的線條，並接著「轉存」＞「顯示程式碼」就可以直接複製進專案中了！

Figma 繪製 SVG 線條

使用 Figma 就更快速了，一樣使用鋼筆工具，待繪製完後，記得將畫面右方工具欄的 Fill 移除，並在線條上按下右鍵選擇 Copy/Paste as > Copy as SVG，直接貼進專案就可以顯示了～

後記

除了上述兩款軟體，也可以用 Inkscape 繪製，當然，如果有現成可以使用的 SVG 線條素材就更棒了！今天的分享就先到這裡啦！