Can I make a bokeh blur with SVG filters or CSS filters?

Question

https://en.wikipedia.org/wiki/File:Faux-bokeh-comparison.jpg

It's easy to distinguish what filter I am using. I don't want to use Gaussian blur.

Answer 1

Yes, it is possible to create a bokeh filter, but in general you will have to use a clip-path to select out the foreground. Here is an example of a three layer bokeh filter with a crude clip-path just to show you how to do it. As you can see, the filter is quite complicated (and performance intensive), and you would probably be better off doing it in PhotoShop rather than at run-time.

<svg width="1800px" height="800px">
  <defs>
<clipPath id="foreground">
  <polyline points="0,240 20,260 40,300 40,360 20,380 30,420 60,450 175,500 200,600, 0,600, 0,220" fill="black"/>
  </clipPath>

<filter id="bokeh" x="0%" y="0%" width="90%" height="100%" color-interpolation-filters="sRGB">
  <feGaussianBlur stdDeviation="2" result="blurSource"/>
  <feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer result="brightness-mask" >
    <feFuncA type="discrete" tableValues="0 0 0 1 1"/>
    </feComponentTransfer>

  
 <!--bokeh Layer 1 -->
 <feTurbulence type="fractalNoise" seed="1" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer>
    <feFuncA type="discrete" tableValues="0 0 0 1"/>
 </feComponentTransfer>
  <feComposite operator="in" in="brightness-mask"/>
  <feComposite operator="in" in="blurSource"/>

  <feMorphology operator="dilate" radius="5"/>
  <feGaussianBlur stdDeviation="8"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                       0 0 0 9 0" /> 
  <feComponentTransfer result="bokeh1">
    <feFuncA type="linear" slope=".5" />
 </feComponentTransfer>  
  
  
  
  <!--bokeh Layer 2 -->
 <feTurbulence type="fractalNoise" seed="49" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer>
    <feFuncA type="discrete" tableValues="0 0 0 1"/>
 </feComponentTransfer>
  <feComposite operator="in" in="brightness-mask"/>
  <feComposite operator="in" in="blurSource"/>

  <feMorphology operator="dilate" radius="10"/>
  <feGaussianBlur stdDeviation="12"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                       0 0 0 15 0" /> 
  <feComponentTransfer result="bokeh2">
    <feFuncA type="linear" slope=".3" />
 </feComponentTransfer>  
  
<!--bokeh Layer 3 -->
  
<feTurbulence type="fractalNoise" seed="44" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer>
    <feFuncA type="discrete" tableValues="0 0 0 1"/>
 </feComponentTransfer>
  <feComposite operator="in" in="brightness-mask"/>
  <feComposite operator="in" in="blurSource"/>

  <feMorphology operator="dilate" radius="10"/>
  <feGaussianBlur stdDeviation="18"/>
  <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                       0 0 0 15 0" /> 
  <feComponentTransfer result="bokeh3">
    <feFuncA type="linear" slope=".2" />
 </feComponentTransfer>  
  
<!--Merge -->
 <feBlend mode="multiply" in="bokeh3" in2="bokeh2"/>
 <feBlend mode="lighten" in2="bokeh1"/>
  
  <feMorphology operator="erode" radius="0" result="bokeh"/>   
  <feGaussianBlur stdDeviation="9" in="SourceGraphic"/>
  <feComposite operator="over" in="bokeh"/> 

</filter>
  </defs>

    <image filter="url(#bokeh)"  width="400px" height="600px" preserveAspectRatio="xMinYMin slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/ac/Faux-bokeh-comparison.jpg"/>
     <image clip-path="url(#foreground)"  width="400px" height="600px" preserveAspectRatio="xMinYMin slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/ac/Faux-bokeh-comparison.jpg"/>
       <image x="400"  width="360px" height="600px" preserveAspectRatio="xMinYMin slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/ac/Faux-bokeh-comparison.jpg"/>
  
  <text x="100" y="630">Bokeh Filter</text>
<<text x="550" y="630">Original</text>
  
</svg>