效果預覽

https://codepen.io/strugglingBoy/pen/jeGJxZ

程式碼下載

https://github.com/enstrongbill/daily-frontend-exercise/tree/master/028-abstract-flower

程式碼解讀

每個花朵由6個6邊形組成，每個6邊形由6個折角形成

每一圈的結構，use相當於是複製元素的意思(用xlink:href來指定複製的元素)

<use xlink:href="#c1" />
<use xlink:href="#c1" transform="rotate(60 160 160)"
 
 />
<use xlink:href="#c1" transform="rotate(120 160 160)" />
<use xlink:href="#c1" transform="rotate(180 160 160)" />
<use xlink:href="#c1" transform="rotate(240 160 160)" />
<use xlink:href="#c1" transform="rotate(300 160 160)" />

每一圈的動畫，svg中用animate來寫動畫，attributeName表示需要被改變的值，values表示該值各個階段的變化，dur表示動畫的長度，repeatCount表示動畫執行的次數，begin表示延遲的時間。

這裡的values裡的路徑值是用的是小m(相對路徑的意思) ,相對前一個點,這裡的begin相當於css3中的animation-delay，延遲的意思，svg中的延遲函式相比css3厲害的地方是，svg中可以這樣子寫begin:click+1s,元素點選後的1秒才執行，svg稱這數值為event value

<path id="c1" stroke="red">
	<animate id="p1" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0"
 
 dur="6s"
	repeatCount="indefinite" />
	<animate attributeName="stroke-width" values="0;4;4;0" dur="6s" repeatCount="indefinite" begin="p1.begin" />
</path>

最後只要6層的結果，然後在用use複製就可以了，defs相當於模版的意思，並不會在頁面上顯示，所以才要用use來複制每一個的結構

用use進行復制（叫重用也好，你們自己喜歡）

總結

需要一定的svg動畫的基礎，詳情請了解