Squircley 線上 SVG 圖片產生器,可製作圓形、正方形或方圓形彩色圖片

Squircley 線上 SVG 圖片產生器,可製作圓形、正方形或方圓形彩色圖片

今天來介紹一個比較輕鬆、活潑的線上工具。如果你在做設計時需要一些生動元素,加入七彩繽紛的幾何圖形或許是個方法,不過你也可能沒有什麼靈感,這時候就能透過工具幫你產生各種好看的形狀,而且無需額外下載任何軟體或應用程式。看一下文章最前面的首圖,要怎麼加入像是背景那些看起來像方塊、圓形穿插的可愛圖案呢?接下來的這個工具能夠線上產生。

本文要介紹的Squircley」是一個線上免費 SVG 圖片產生器,可以產生從圓形到正方形、或介於兩者之間的方圓形(Squircle),這些形狀可使用於標誌、圖示圖案或背景圖片,使用者利用網頁上的選項調整旋轉方向、放大縮小、曲率(Curvature)和填充顏色,直接在線上預覽後可選擇匯出為 SVG 格式,或是直接複製取得 SVG 原始碼。

輸出的 SVG 原始碼會複製到剪貼簿,可直接使用於一般網頁 HTML、CSS 樣式表,而產生的 SVG 檔案可用於設計軟體像是 Figma、Sketch、Framer 和 XD 等等。如果需要彩色幾何圖案的話 Squircley 是一個很方便、簡單易用的小工具,可以快速滿足你的需求。

Squircley
https://squircley.app/

使用教學

STEP 1

開啟 Squircley 網站後預設會看到一個方圓形圖案,我們可以拖曳右側的選項來變化圖形,像是旋轉、放大縮小或是曲度,旁邊的預覽會即時更新。

Squircley

Squircley

STEP 2

底下有一個 Fill 選項調整填充顏色,預設會提供一些色彩,如果你想要的顏色不在這裡,直接輸入色碼就能帶入特定顏色。

Squircley

STEP 3

最後點選下方 Export 可匯出圖案,如果要儲存成 .svg 格式就選擇「Save」匯出,另一個「Copy」選項可以將圖案的 SVG 原始碼複製到剪貼簿,對於 HTML / CSS 使用來說就會變得很簡單。

Squircley

值得一試的三個理由:

  1. 免費 SVG 圖片產生器,可製作正方形、圓形和介於兩者的方圓形
  2. 調整旋轉方向、放大縮小、曲率(Curvature)和填充顏色
  3. 將產生的圖案儲存為 SVG 格式或將程式碼複製到剪貼簿
分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6251