TP Notes: 有趣的 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>

TP Notes

2020年12月24日星期四

有趣的 SVG filter - 創造紋理

沒有留言:

張貼留言

2020年12月24日 星期四

有趣的 SVG filter - 創造紋理

沒有留言:

張貼留言

2020年12月24日星期四