有趣的 SVG filter - 創造紋理

雖然知道 feTurbulence 可以用來創造很多假的紋路，例如之前做的雲一樣，但是對於非美術專長的我來說，還是無法運用熟練，參考了幾個範例，自己練習做幾個試試，很多會利用光線來達到凹凸材質的展現，相當有意思 ``` $mmcode(r1) ``` <div class="mmresult r1"> 有紋路的紙<br> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="a122401_f1" filterUnits="userSpaceOnUse"> <feTurbulence type="fractalNoise" baseFrequency="0.03 0.06" numOctaves="10" result="a122401_t1" seed="1"/> <feSpecularLighting in="a122401_t1" lighting-color="#eed" specularExponent="2" surfaceScale="4" result="a122401_L1"> <feDistantLight azimuth="45" elevation="30" /> </feSpecularLighting> <feComposite operator="atop" in="a122401_L1" in2="SourceGraphic"/> </filter> </defs> <rect x=0 y=0 width=100% height=100% fill="#aaa" style="filter: url(#a122401_f1)"/> </svg> </div> ``` $mmcode(r2) ``` <div class="mmresult r2"> 岩石<br> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="a122402_f1" filterUnits="userSpaceOnUse"> <feTurbulence type="fractalNoise" baseFrequency="0.03 0.06" numOctaves="10" result="a122402_t1" seed="1"/> <feSpecularLighting in="a122402_t1" lighting-color="#fff" specularExponent="20" surfaceScale="3" result="a122402_L1"> <feDistantLight azimuth="45" elevation="30" /> </feSpecularLighting> <feComposite operator="atop" in="a122402_L1" in2="SourceGraphic"/> </filter> </defs> <rect x=0 y=0 width=100% height=100% fill="#000" style="filter: url(#a122402_f1)"/> </svg> </div> ``` $mmcode(r3) ``` <div class="mmresult r3"> 好像某種牆壁的紋路<br> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="a122403_f1" filterUnits="userSpaceOnUse"> <feTurbulence type="fractalNoise" baseFrequency="0.01 0.06" numOctaves="10" result="a122403_t1" seed="1"/> <feSpecularLighting in="a122403_t1" lighting-color="#fff" specularExponent="4" surfaceScale="3" result="a122403_L1"> <feDistantLight azimuth="45" elevation="30" /> </feSpecularLighting> <feComposite operator="atop" in="a122403_L1" in2="SourceGraphic"/> </filter> </defs> <rect x=0 y=0 width=100% height=100% fill="#888" style="filter: url(#a122403_f1)"/> </svg> </div> ``` $mmcode(r4) ``` <div class="mmresult r4"> 好像某種牆壁的紋路<br> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <defs> <filter id="a122404_f1" filterUnits="userSpaceOnUse"> <feTurbulence baseFrequency="0.01 0.06" numOctaves="1" result="a122404_t1" seed="1"/> <feSpecularLighting in="a122404_t1" lighting-color="#fff" specularExponent="4" surfaceScale="5" result="a122404_L1"> <feDistantLight azimuth="45" elevation="30" /> </feSpecularLighting> <feComposite operator="atop" in="a122404_L1" in2="SourceGraphic"/> </filter> </defs> <rect x=0 y=0 width=100% height=100% fill="#555" style="filter: url(#a122404_f1)"/> </svg> </div> ``` $mmcode(r12) ``` <div class="mmresult r12"> 好像某種牆壁的紋路<br> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="a122412_f1" filterUnits="userSpaceOnUse"> <feTurbulence type="fractalNoise" baseFrequency="0.003 0.01" numOctaves="10" result="a122412_t1" seed="1"></feTurbulence> <feSpecularLighting in="a122412_t1" lighting-color="#eee" specularExponent="1" surfaceScale="60" result="a122412_L1"> <feDistantLight azimuth="45" elevation="30"></feDistantLight> </feSpecularLighting> <feComposite operator="atop" in="a122412_L1" in2="SourceGraphic"></feComposite> </filter> </defs> <rect x="0" y="0" width="100%" height="100%" fill="#ccc" style="filter: url(#a122412_f1)"></rect> </svg> </div> ``` $mmcode(r5) ``` <div class="mmresult r5"> 髮絲紋 ?<br> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <defs> <filter id="a122405_f1" filterUnits="userSpaceOnUse"> <feTurbulence baseFrequency="0.5 0.03" numOctaves="1" result="a122405_t1" seed="1"/> <feSpecularLighting in="a122405_t1" lighting-color="#fff" specularExponent="2" surfaceScale="3" result="a122405_L1"> <feDistantLight azimuth="45" elevation="20" /> </feSpecularLighting> <feComposite operator="atop" in="a122405_L1" in2="SourceGraphic"/> </filter> </defs> <rect x=0 y=0 width=100% height=100% fill="#000" style="filter: url(#a122405_f1)"/> </svg> </div> ``` $mmcode(r6) ``` <div class="mmresult r6"> 不曉得像什麼<br> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <defs> <filter id="a122406_f1" filterUnits="userSpaceOnUse"> <feTurbulence baseFrequency="0.008 0.06" numOctaves="1" result="a122406_t1" seed="1"/> <feSpecularLighting in="a122406_t1" lighting-color="#fff" specularExponent="60" surfaceScale="30" result="a122406_L1"> <feDistantLight azimuth="45" elevation="60" /> </feSpecularLighting> <feFlood flood-color="#000" result="a122406_fd1"/> <feComposite operator="atop" in="a122406_fd1" in2="a122406_L1" result="a122406_fe1"/> <feComposite operator="atop" in="a122406_fe1" in2="SourceGraphic"/> </filter> </defs> <rect x=0 y=0 width=100% height=100% fill="#eee" style="filter: url(#a122406_f1)"/> </svg> </div> ``` $mmcode(r8) ``` <div class="mmresult r8"> 木頭紋理<br> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff"> <defs> <filter id="a122408_f1" x="0" y="0" width="100%" height="100%"> <feFlood flood-color="#722" result="a122408_fd1"/> <feFlood flood-color="#ea0" result="a122408_fd2"/> <feTurbulence type="fractalNoise" baseFrequency="0.005 0.06" numOctaves="1" seed="1" > </feTurbulence> <feComponentTransfer color-interpolation-filters="sRGB" result="a122408_ft1"> <feFuncR type="discrete" tableValues="0 0"/> <feFuncG type="discrete" tableValues="0 0"/> <feFuncB type="discrete" tableValues="0 0"/> <feFuncA type="table" tableValues="0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/> </feComponentTransfer> <feComposite in="a122408_fd1" in2="a122408_ft1" operator="in" result="a122408_fcin"/> <feComposite in="a122408_fd2" in2="a122408_ft1" operator="out" result="a122408_fcout"/> <feComposite in="a122408_fcin" in2="a122408_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <rect x="0" y="0" width="300" height="300" style="filter: url(#a122408_f1)"></rect> </svg> </div> ``` $mmcode(r9) ``` <div class="mmresult r9"> 好像蠻有藝術的紋理<br> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff"> <defs> <filter id="a122409_f1" x="0" y="0" width="100%" height="100%"> <feFlood flood-color="#000" result="a122409_fd1"/> <feFlood flood-color="#fff" result="a122409_fd2"/> <feTurbulence baseFrequency="0.03 0.03" numOctaves="1" seed="1" > </feTurbulence> <feComponentTransfer color-interpolation-filters="linearRGB" result="a122409_ft1"> <feFuncA type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"/> <feFuncR type="discrete" tableValues="0 0"/> <feFuncG type="discrete" tableValues="0 0"/> <feFuncB type="discrete" tableValues="0 0"/> </feComponentTransfer> <feComposite in="a122409_fd1" in2="a122409_ft1" operator="in" result="a122409_fcin"/> <feComposite in="a122409_fd2" in2="a122409_ft1" operator="out" result="a122409_fcout"/> <feComposite in="a122409_fcin" in2="a122409_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <rect x="0" y="0" width="300" height="300" style="filter: url(#a122409_f1)"></rect> </svg> </div> ``` $mmcode(r10) ``` <div class="mmresult r10"> 好像蠻有藝術的紋理<br> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff"> <defs> <filter id="a122410_f1" x="0" y="0" width="100%" height="100%"> <feFlood flood-color="#000" result="a122410_fd1"/> <feFlood flood-color="#fff" result="a122410_fd2"/> <feTurbulence baseFrequency="0.03 0.03" numOctaves="5" seed="1" type="fractalNoise"> </feTurbulence> <feComponentTransfer color-interpolation-filters="linearRGB" result="a122410_ft1"> <feFuncA type="discrete" tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"/> <feFuncR type="discrete" tableValues="0 0"/> <feFuncG type="discrete" tableValues="0 0"/> <feFuncB type="discrete" tableValues="0 0"/> </feComponentTransfer> <feComposite in="a122410_fd1" in2="a122410_ft1" operator="in" result="a122410_fcin"/> <feComposite in="a122410_fd2" in2="a122410_ft1" operator="out" result="a122410_fcout"/> <feComposite in="a122410_fcin" in2="a122410_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <rect x="0" y="0" width="300" height="300" style="filter: url(#a122410_f1)"></rect> </svg> </div> ``` $mmcode(r11) ``` <div class="mmresult r11"> 模擬地圖<br> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="background-color:#fff"> <defs> <filter id="a122411_f1" x="0" y="0" width="100%" height="100%"> <feFlood flood-color="#06a" result="a122411_fd1"/> <feFlood flood-color="#0f0" result="a122411_fd2"/> <feTurbulence baseFrequency="0.008 0.008" numOctaves="10" seed="2" type="fractalNoise"> </feTurbulence> <feComponentTransfer color-interpolation-filters="linearRGB" result="a122411_ft1"> <feFuncA id="a122411_kk" type="table" tableValues="0 0"/> <feFuncR type="discrete" tableValues="0 0"/> <feFuncG type="discrete" tableValues="0 0"/> <feFuncB type="discrete" tableValues="0 0"/> </feComponentTransfer> <feComposite in="a122411_fd1" in2="a122411_ft1" operator="in" result="a122411_fcin"/> <feComposite in="a122411_fd2" in2="a122411_ft1" operator="out" result="a122411_fcout"/> <feComposite in="a122411_fcin" in2="a122411_fcout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <rect x="0" y="0" width="300" height="300" style="filter: url(#a122411_f1)"></rect> </svg> <script> $(function() { let i; let hh=""; for (i=0;i<127;i++) { hh+=(i/200)+" "; } for (i=0;i<127;i++) { hh+="1 "; } $("#a122411_kk").attr("tableValues",hh); }) </script></div> 最後以這個火焰做為這篇的結束，對於非美術專長的我來說，能湊出這樣的火焰已經滿足了..... ``` $mmcode(r7) ``` <div class="mmresult r7"> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="background-color:#000"> <defs> <filter id="a122407_f1" filterUnits="userSpaceOnUse"> <feTurbulence type="fractalNoise" baseFrequency="0.02 0.02" numOctaves="10" result="a122407_t1" seed="1"> </feTurbulence> <feDisplacementMap in2="a122407_t1" in="SourceGraphic" scale="140" xChannelSelector="R" yChannelSelector="G"/> </filter> <radialGradient id="a122407_rad1"> <stop offset="0%" stop-color="#ff0f"></stop> <stop offset="100%" stop-color="#f000"></stop> </radialGradient> </defs> <rect x=0 y=30 width=90% height=100% fill="url(#a122407_rad1)" style="filter: url(#a122407_f1)"/> <ellipse cx=150 cy=200 rx=120 ry=200 fill="url(#a122407_rad1)" style="filter: url(#a122407_f1)"/> <ellipse cx=150 cy=240 rx=120 ry=200 fill="url(#a122407_rad1)" style="filter: url(#a122407_f1)"/> <ellipse cx=150 cy=260 rx=120 ry=200 fill="url(#a122407_rad1)" style="filter: url(#a122407_f1)"/> </svg> <script> $(()=> { let i=1; function t() { $("#a122407_f1 feTurbulence").attr("seed",i); i++; if (i>199) i=0; if (i<200) { setTimeout(t,80); } } t(); }) </script> </div>