svgのfilterを使ってラテアート調の効果をつける

ラテアートがきれいだったので，svgでラテアートっぽい効果をつけるfilterを作ってみた．周辺が暗く，コントラストの高い画像だとそれっぽく見えるかも．

• 画像を二値化する．
• ぼかした部分と輪郭の部分を生成し，重ねる．
• ノイズフィルタを使ってコーヒーとクリームのゆらぎを表現する．

<?xml version="1.0" standalone="no"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <defs>
  <filter id="caffeLatte">
   <!--グレイスケール-->
   <feColorMatrix type="saturate" values="0" result="gray"/>
   <!--離散化-->
   <feComponentTransfer>
    <feFuncR type="discrete" tableValues="0,1"/>
    <feFuncG type="discrete" tableValues="0,1"/>
    <feFuncB type="discrete" tableValues="0,1"/>
   </feComponentTransfer>
   <!--ぼかし-->
   <feGaussianBlur stdDeviation="1" result="blur"/>
   <!--輪郭抽出-->
   <feConvolveMatrix in="gray" order="3 3" targetX="1" targetY="1" edgeMode="none" kernelMatrix="1 1 1 1 -8 1 1 1 1" divisor="8" preserveAlpha="true" result="edge"/>
   <!--輪郭を黒の不透明度に変換-->
   <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0 0 0 0" result="edge2"/>
   <!--背景色-->
   <feFlood flood-color="black" result="bg"/>
   <!--背景色→ぼかし→輪郭の順に重ねる（この時点で黒）-->
   <feMerge>
    <feMergeNode in="bg"/>
    <feMergeNode in="blur"/>
    <feMergeNode in="edge2"/>
   </feMerge>
   <!--色味をカフェオレ調に-->
   <feComponentTransfer result="base">
    <feFuncR type="linear" slope="0.6" intercept="0.4"/>
    <feFuncG type="linear" slope="0.8" intercept="0.2"/>
    <feFuncB type="linear" slope="1" intercept="0"/>
   </feComponentTransfer>
   <!--ノイズを生成-->
   <feTurbulence type="turbulence" baseFrequency="0.005" numOctaves="5" seed="3" stitchTiles="noStitch"/>
   <feColorMatrix type="saturate" values="0" result="noise"/>
   <!--ノイズをブレンド-->
   <feBlend in="base" in2="noise" mode="screen"/>
  </filter>
 </defs>
 <image filter="url(#caffeLatte)" xlink:href="http://www.konami.jp/products/dl_xbox_dracula_hd/images/charlotte.jpg" width="200" height="200"/>
</svg>