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="vhs">
   <feColorMatrix in="SourceGraphic" 
    type="saturate" values="0" result="gray"/>
   <feColorMatrix in="SourceGraphic" 
    type="matrix" values="1 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1" result="red"/>
   <feColorMatrix in="SourceGraphic" 
    type="matrix" values="0 0 0 0 1 0 1 0 0 0 0 0 0 0 1 0 0 0 0 1" result="green"/>
   <feColorMatrix in="SourceGraphic" 
    type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 1 0 0 0 0 0 0 1" result="blue"/>
   <feGaussianBlur in="red" stdDeviation="3" result="bluredRed"/>
   <feGaussianBlur in="green" stdDeviation="2" result="bluredGreen"/>
   <feGaussianBlur in="blue" stdDeviation="1" result="bluredBlue"/>
   <feOffset dx="5" dy="3" in="bluredRed" result="offsetRed"/>
   <feOffset dx="0" dy="1" in="bluredGreen" result="offsetGreen"/>
   <feBlend in="offsetRed" in2="offsetGreen" mode="multiply"/>
   <feBlend in2="bluredBlue" mode="multiply"/>
   <feBlend in2="gray" mode="screen" result="rgbg"/>

   <feTurbulence type="turbulance" baseFrequency="0.5" numOctaves="1" seed="3" stitchTiles="noStitch" result="noise"/>
   <feDisplacementMap in="gray" in2="noise" xChannelSelector="R" yChannelSelector="G" scale="3" result="noised"/>
   <feColorMatrix in="noise" 
    type="matrix" values="0.4 0 0 0 0.6 0.4 0 0 0 0.6 0.4 0 0 0 0.6 0 0 0 0 0.3" result="noise2"/>
   <feBlend in="rgbg" in2="noised" mode="lighten"/>
   <feBlend in2="noise2" mode="multiply"/>
  </filter>
 </defs>
 <image filter="url(#vhs)" xlink:href="http://www.konami.jp/products/dl_xbox_dracula_hd/images/charlotte.jpg" width="200" height="200"/>
</svg>