feDiffuseLighting filter primitive

You have to use light source with feSpotLight, feDistantLight or fePointLight.
You have to use feComposite, feMerge or feBlend to merge picture and light or apply lighting to in picture.
feComposite give best result with more parameters.


  • surfaceScale : height of surface.
  • diffuseConstant : This can be any non-negative number.
  • kernelUnitLength : One or two positive numbers. ( space or comma as separator ) 
  • lighting-color : color value for light
  • result : name of RGBA raster created
  • Example of code:

       <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
          <feImage xlink:href='puzzle.jpg' result='image'/>
          <feDiffuseLighting lighting-color='white' result='spot' surfaceScale="1" diffuseConstant="1" kernelUnitLength="1,1"> 
             <feSpotLight x='200' y='200' z='200' pointsAtX='200' pointsAtY='100' pointsAtZ='0' specularExponent='16' limitingConeAngle='45' />
          <feComposite in='image' in2='spot' operator="arithmetic" k1="0.5" k2="1" k3="1" k4="0"/>
    <use filter="url(#MyFilter)" x='0' y='0'/>

    Figure 1: different values of surfaceScale lighting a turbulence

    Figure 2: effects on tiling of plane 

    Figure 3: effects on pattern

    Figure 4: effects on gradient with stop-opacity:0 for one color

    Tool: you can change parameters for feDiffuseLighting, feSpotLight and feComposite ( to merge picture and lightning ) and move with mouse lighting on a JPEG or SVG picture.

    Example  see different values of surfaceScale for feDiffuseLighting on feTurbulence picture.
                  examples using gradient, using pattern, using tiling of plane 

    FrontPage  feColorMatrix  feComponentTransfer  feSpecularLightning feDiffuseLightning  feSpotLight  feDistantLight  fePointLight  feFlood  feImage   feTurbulence   feTile  feMerge  feBlend  feComposite feGaussianBlur  feMorphology  feConvolveMatrix  feDisplacementMap  feOffset

    Valid XHTML 1.0!