技術 SVG 自學微筆記(08) - 線性&放射漸層

不定更新、即將迎來結尾 (๑´ㅂ`๑) 學習資源: W3Schools、其他網路資料 漸層(Gradients)是W3Schools關於SVG基礎教學的...

技術 SVG 自學微筆記(07) - 圖形濾鏡

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 SVG有提供Filter(濾鏡)這個東西，可以用來在SVG圖形上加入特殊的效果，像...

技術 SVG 自學微筆記(04) - 繪製多邊形、折線

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 SVG : 多邊形 (僅列出部分有使用到的屬性) <svg>&lt...

技術 SVG 自學微筆記(06) - 線段的特性

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 在前面的微筆記中，有使用到<line></line>來繪製...

技術 [Day 2] 30 Days Iron Man: 參拾天鐵人

100 Days CSS Challenge 今天在了解前置設定之後，咱們來一起破關吧~就從Day #1開始!以下為重點介紹，完整程式碼請參考作品連結 1....

技術 SVG 自學微筆記(01) - 初步認識 SVG

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 關於 SVG SVG 全名為 Scalable Vector Graphics 即...

技術 [Day 22] Send Mail: 您的一封來信

在製作個人網頁時，通常會有一個contactme(與我聯絡)的表格，這時候，我們就可以想想看怎麼美化我們的送信動畫~今天我們來實作Day #20 Send Ma...

技術 [Day 6] Statistic: 來呈現文章瀏覽數逐漸下滑的趨勢(>_<)

Statistic 今天我們來實作Day #5 搭配上筆者Thibe這一週的文章瀏覽和預期數據，看來這下滑趨勢達到顯著呢(p &lt; 0.05)!此次作品建議...

技術 [Day 18] Blobby: 改變形狀的閃耀泡泡

在昨天的文章學習到新的scale, rotate, translate的寫法，可以從transform獨立出來，今天就可以實際運用，配合SVG的圖形，來達到改變...

技術 [Day 24] Fitness Tracker: 您今天運動了嗎~我沒有...

現在科技產品日新月異，許多人都會戴上智慧手錶、手環來追蹤運動情況，各運動品牌也有屬於會員的數據紀錄網頁，我們常會在上面看到當日運動數據的圖表。今天我們就來實作D...

技術 Day9：平面圖疊家具(二)

因為搞不清楚到底什麼問題導致各種偏移，所以從SVG開始重新做，只保留兩個控制點跟一個圖形去掉底圖的控制功能跟固定功能，開始抓蟲 本來以為可以用AI處理bug，推...

技術 Day8：平面圖疊家具(一)

這個部份我大概卡了一、兩個禮拜，還沒卡完，雖然是30天連續發文的鐵人賽，但是 side project 應該會做超過30天。 把東西疊在一起之後開始出現問題，腦...

技術 Day10：瀏覽器座標 vs SVG 座標演示

經歷了暴風重寫之後的感想計算的時候如果沒有轉換成 SVG 座標系統，SVG移動的位置計算就會以瀏覽器的為主，如果有置中或是padding一定就會偏移，而且XY軸...